Я использую react-router-dom 4.2
. У меня есть App.js
с Authenticated
компонентами внутри. Эти компоненты созданы мной и добавляют немного бизнес-логики, создают компонент через React.createElement
и направляют их через Route
компонент. Ничего необычного
App.js
:
// ...
const App = props => (
<BrowserRouter>
<Fragment>
<Switch location={location}>
<Route
exact
path={URLS.ROOT}
render={() => <Redirect to={URLS.DASHBOARD} />}
/>
<Authenticated
{...props}
resource={ResourcesCode.DASHBOARD}
patent={PatentsCode.VIEW}
path={URLS.DASHBOARD}
component={Dashboard}
/>
<Authenticated
{...props}
resource={ResourcesCode.SUBSCRIBE}
patent={PatentsCode.VIEW}
path={URLS.SUBSCRIBE}
component={Subscribe}
/>
</Fragment>
</BrowserRouter>
// ...
Внутри компонента Subscribe
(упомянутого выше во втором Authenticated
компоненте) у меня есть несколько маршрутов, как вы можете видеть ниже:
// ...
<Route
path={URLS.SUBSCRIBE}
exact
render={() => (
//...
)}
/>
<Route
path={URLS.SUBSCRIBETWO}
exact
render={() => (
//...
)}
/>
// ...
Дело в том, что эти маршруты на дочернем компоненте (Subscribe
) игнорируются.
Почему их игнорируют? Как я могу решить это?
Мне действительно нужны эти маршруты внутри дочернего компонента. Я не хочу перемещать их в App.js
ВАЖНОЕ РЕДАКТИРОВАНИЕ:
Второй маршрут игнорируется, я понял, что первый нет. Другими словами, компонент Route
с path = {URLS.SUBSCRIBE} работает, но компонент с path = {URLS.SUBSCRIBETWO} игнорируется, поэтому здесь нужно решить проблему.
РЕДАКТИРОВАТЬ:
Для, если вам нужно, компонент Authenticated
:
// ...
}) => (
<Route
path={path}
exact={exact}
render={route => {
if (!authenticated) {
if (loggingIn) {
return '';
}
return <Redirect to={URLS.LOGIN} />;
}
if (!roleSubReady) {
return '';
}
if (path !== URLS.SUBSCRIBE && user.pendingSubscription) {
if (isLoading) {
return '';
}
return <Redirect to={URLS.SUBSCRIBE} />;
}
if (path === URLS.SUBSCRIBE && !user.pendingSubscription) {
if (isLoading) {
return '';
}
return <Redirect to={URLS.DASHBOARD} />;
}
if (resource && !checkPermission(user, resource, patent)) {
return <NotAuthorized history={route.history} />;
}
return (
<React.Fragment>
<Menu user={user} path={path} isLoading={isLoading} />
<Header show={showHeaderAndFooter} user={user} path={path} />
<MainContent>
{React.createElement(component, {
user,
resource,
...route,
})}
<Footer show={showHeaderAndFooter} />
</MainContent>
</React.Fragment>
);
}}/>
);