У меня проблема с тем, что когда я запускаю свое приложение реагирования, я могу перейти ко всем маршрутам.Проблемы возникают, когда я нажимаю кнопку обновления в браузере, я получаю сообщение об ошибке, что маршрут не найден.
Вот как настроены маршруты: Index.js
import SearchByRequestId from '../components/SearchByRequestId';
import ErrorsByDate from '../components/ErrorsByDate';
import PayerProperties from '../components/PayerProperties';
import BucketCreator from '../components/BucketCreator';
import EDI275Component from '../components/EDI275Component';
export const SEARCH_BY_REQUEST_ID = 'SEARCH_BY_REQUEST_ID';
export const ERRORS_BY_DATE = 'ERRORS_BY_DATE';
export const PAYER_PROPERTIES = 'PAYER_PROPERTIES';
export const BUCKET_VIEWER = 'BUCKET_VIEWER';
export const EDI_275_VIEWER = 'EDI_275_VIEWER';
export const DEFAULT_ROUTE_VIEWER = 'DEFAULT_ROUTE_VIEWER';
export const PERMISSIONS = {
MA_ADMIN: '7462'
};
export const REQUEST_DETAILS_ROUTE = {
name: SEARCH_BY_REQUEST_ID,
tabName: 'Search By Request Id',
pathname: '/search_by_id.html',
component: SearchByRequestId
};
export const ERRORS_BY_DATE_ROUTE = {
name: ERRORS_BY_DATE,
tabName: 'Errors By Date',
pathname: '/errors_by_date.html',
component: ErrorsByDate
};
export const PAYER_PROPERTIES_ROUTE = {
name: PAYER_PROPERTIES,
tabName: 'Payer Properties',
pathname: '/payer_properties.html',
component: PayerProperties
};
export const BUCKET_VIEWER_ROUTE = {
name: BUCKET_VIEWER,
tabName: 'Create Bucket JSON',
pathname: '/bucket_creator.html',
component: BucketCreator
};
export const EDI_275_ROUTE = {
name: EDI_275_VIEWER,
tabName: 'Create EDI 275',
pathname: '/edi_275.html',
component: EDI275Component
};
export const ALL_ROUTES = [
REQUEST_DETAILS_ROUTE,
ERRORS_BY_DATE_ROUTE,
PAYER_PROPERTIES_ROUTE,
BUCKET_VIEWER_ROUTE,
EDI_275_ROUTE
];
export const getAllPermissions = () => Object.keys(PERMISSIONS).map(key => PERMISSIONS[key]);
Page.js отображает все маршруты, указанные выше, как меню с вкладками.Эта часть работает как шарм: Page.js
import React, { Fragment, PureComponent, Component } from 'react';
import { Route, Switch, Redirect, withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { PropTypes } from 'prop-types';
import { push } from 'connected-react-router';
import { Nav, NavItem, NavLink } from 'reactstrap';
import { authorize, notifications } from '../common/hoc';
import Dashboard from './Dashboard';
import { getAllPermissions, ALL_ROUTES } from '../routes';
class App extends PureComponent {
constructor(props) {
super(props);
this.state = {};
}
render() {
const { routeInfos, push, currentPathname } = this.props;
const toPath = routeInfos && routeInfos.length > 0 ? routeInfos[0].pathname : '/error.html';
const tabs = routeInfos.map(routeInfo => (
<NavItem key={routeInfo.pathname}>
<NavLink
href="#"
active={routeInfo.pathname === currentPathname}
onClick={evt => {
push(routeInfo.pathname);
evt.preventDefault();
evt.stopPropagation();
}}
>
{routeInfo.tabName}
</NavLink>
</NavItem>
));
const routes = routeInfos.map(routeInfo => (
<Route key={routeInfo.pathname} exact path={routeInfo.pathname} component={routeInfo.component} />
));
return (
<Fragment>
{toPath !== '/error.html' && <Dashboard />}
<Nav className="mt--1 mb-3" tabs>
{tabs}
</Nav>
<Switch>
{routes}
{toPath !== '/error.html' && <Redirect from="/" to={toPath} />}
<Route component={() => <div>Error Loading page</div>} />
{/* <Route exact path="/" component={<Dashboard />} /> */}
</Switch>
</Fragment>
);
}
}
App.propTypes = {
currentPathname: PropTypes.string,
routeInfos: PropTypes.array,
push: PropTypes.func
};
const mapStateToProps = state => {
const {
router: {
location: { pathname: currentPathname }
}
} = state.toJS();
return { routeInfos: ALL_ROUTES, currentPathname };
};
const mapDispatchToProps = dispatch =>
bindActionCreators(
{
push
},
dispatch
);
export default withRouter(
connect(
mapStateToProps,
mapDispatchToProps
)(notifications()(authorize(getAllPermissions)(App)))
);
Когда страница изначально отображает следующий URL, http://localhost:3000/search_by_id.html работает.Когда я нажимаю кнопку обновления в браузере для того же URL-адреса, я получаю следующее сообщение об ошибке:
Cannot GET /search_by_id.html