Question

我正在尝试对路由进行身份验证检查。我的App组件是我的父路线，我想在App组件中渲染我的孩子。

问题：在我当前的设置下，路由器从不进入App组件，如果AuthRoutes匹配则直接进入'/auth'

目标：如何确定如果'/auth'匹配，它首先进入我的App组件，在该组件中渲染其子对象？

Index.tsx

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

Router.tsx

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

App.tsx

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;

Answer 1

我在这里假设您正在使用最新版本的react-router（v4），似乎您正在尝试以以前版本的方式进行嵌套路由。

要将其应用于您的示例，您需要具备以下条件：

App.tsx

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 }}>
        <Route path={'/auth'} component={AuthRoutes} />
        <Route component={AuthContainer}>
          <Route path={'/dashboard'} component={Dashboard} />
        </Route>
      </Content>
    </Layout>
  );
}
export default App;

Router.tsx

export default () => {
  return (
    <Switch>
      <Route path={'/'} component={App} />
    </Switch>
  );
};

注意区别吗？嵌套的路由是内部 App组件，而不是其子组件。

您可以在此处参考迁移文档：https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/migrating.md#nesting-routes

路由器不渲染子级

1 个答案: