Javascript 在以前路由的组件内部路由

我正在使用

react路由器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

）上的路由

为什么它们被忽略了？我如何解决它？

我真的需要在子组件中使用这个路由。我不想将它们移动到

App.js

重要编辑：

第二条路线被忽略了，我意识到第一条路线没有。换句话说，路径为{url.SUBSCRIBE}的

Route

组件正在工作，但是路径为{url.subscribebetwo}的组件被忽略，所以这里是要解决的问题

编辑：

如果需要，

已验证的

组件：

// ... 
}) => (
<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>
  );
 }}/>
);

/。。。
}) => (
{
如果（！已验证）{
如果（登录）{
返回“”；
}
返回；
}
如果（！roleSubReady）{
返回“”；
}
if（路径！==url.SUBSCRIBE&&user.pendingSubscription）{
如果（孤岛加载）{
返回“”；
}
返回；
}
if（path==url.SUBSCRIBE&&！user.pendingSubscription）{
如果（孤岛加载）{
返回“”；
}
返回；
}
if（资源&检查权限（用户、资源、专利））{
返回；
}
返回(
{React.createElement（组件{
用户，
资源,，
…路线，
})}
);
}}/>
);

您可以显示已验证的密码吗component@ShubhamKhatri我刚刚把它添加到了答案中。谢谢。@WederRibas，不，我现在就试试。谢谢。@PabloDeLuca就我所知，第二条路线没有理由不渲染。我假设

Subscribe

组件中的路由被

..

包围，对吗？让我们来看看。

// ... 
}) => (
<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>
  );
 }}/>
);