Reactjs 路由器不渲染子对象

我正在尝试对我的路由实施身份验证检查。我的应用程序组件是我的父路由，我希望在应用程序组件中呈现我的孩子

问题：在我当前的设置中，如果“/auth”匹配，路由器永远不会进入应用程序组件并直接进入AuthRoutes

目标：如何确保如果“/auth”匹配，它首先进入我的应用程序组件，在那里我呈现它的子组件

Index.tsx

路由器.tsx

App.tsx

---

我在这里假设您使用的是最新版本的react router v4，并且似乎您正在尝试以以前版本的方式执行嵌套路由

要将其应用于您的示例，您需要：

App.tsx

const-App:React.FC={children}:Props=>{ 回来 ; } 导出默认应用程序； 路由器.tsx

导出默认值=>{ 回来 ; }; 注意到区别了吗？嵌套路由位于应用程序组件内部，而不是其子组件

您可以在此处参考迁移文档：

ReactDOM.render(
 <Provider store={store}>
    <ConnectedRouter history={history}>
        <Router />
    </ConnectedRouter>
 </Provider>,
 document.getElementById("root")
);

export default () => {
  return (
    <Switch>
      <Route path={'/'} component={App}>
        <Route path={'/auth'} component={AuthRoutes} />
        <Route component={AuthContainer}>
          <Route path={'/dashboard'} component={Dashboard} />
        </Route>
      </Route>
    </Switch>
  );
};

const App: React.FC = ({ children }: Props<Component>) => {
  return (
    <Layout className="layout">
      <Nav theme={'light'} mode={'horizontal'} />
      <Content style={{ background: '#fff', padding: 24, margin: 0, minHeight: 280 }}>
        {children}
      </Content>
    </Layout>
  );
}
export default App;