Маршруты внутри ранее проложенного компонента - PullRequest
0 голосов
/ 03 июля 2018

Я использую 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>
  );
 }}/>
);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...