具有嵌套布局的 React Router

Question

我在反应路线方面遇到了一些问题，不确定什么是完成我正在尝试的事情的合适方法。

我在 React Router v4 中读到 parents 应该渲染他们的 children 所以我有这样的东西

<Switch>
  <Route exact path='/' component={FrontEndContainer} />
  <Route exact path='/dashboard' component={AuthContainer}>
  <Route exact path='/login' component={LoginPage} />
</Switch>

const FrontEndContainer = () => {
  return (
    <div>
      <Navigation />
      <main>
        <Header />
        <Route exact path='/' component={HomePage} />
        <Route path='/about' component={AboutPage} />
        <Route path='/contact' component={ContactPage} />
      </main>
      <Footer />
    </div>
  );
};
export default FrontEndContainer;

如果您导航到 http://example.com but when you try and navigate to http://example.com/about does not render. I realize its because of the exact but if I don't have the exact, when you navigate to http://example.com/login，这将起作用 FrontEndContainer 在没有内部组件和登录页面的情况下呈现。

我的目标是，当用户导航到登录页面时，不呈现 FrontEndContainer，而当导航到/或/关于 FrontEndContainer 和内部容器时呈现。

我觉得我遗漏了一些非常简单的东西...

在此先感谢您指出错误！

Answer 1

您是否尝试过像这样对 Switch 块中的语句重新排序？这样 FrontEndContainer 将在与任何先前组件不匹配的任何路由中呈现。

<Switch>
  <Route exact path='/dashboard' component={AuthContainer}>
  <Route exact path='/login' component={LoginPage} />
  <Route path='/' component={FrontEndContainer} />
</Switch>

具有嵌套布局的 React Router

React Router with Nested Layouts

nested-routes

reactjs

react-router