Роутер не рендерит детей

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

Я предполагаю, что вы используете последнюю версиюact-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