具有嵌套布局的反应路由器

Question

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

我在反应路由器 v4 中读到，父母应该渲染他们的孩子，所以我有这样的东西

<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，这可以工作，但是当您尝试导航到 http://example.com/about 时不会呈现。我意识到它是因为确切的，但如果我没有确切的信息，当您导航到 http://example.com/login 时，FrontEndContainer 会在没有内部组件和登录页面的情况下呈现。

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

我觉得我错过了一些非常简单的东西......

提前感谢您指出错误！

Answer 1

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

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