Reactjs 反应路由器4与嵌套路由不匹配

我想有一个全球路线来处理所有404。登录后，所有主视图都会位于用页眉和页脚包装的布局内。尽管NotFound组件应该呈现在此布局之外

这里有一个“工作”链接

下面是代码的简化示例：

const App = () => (
  <Switch>
    <Route path="/register" component={Register} />
    <Route path="/signin" component={SignIn} />
    <Route path="/" component={Home} />
    <Route component={NotFound} />
  </Switch>
);

const Home = () => (
  <div>
    <Header />
    <main>
      <Switch>
        <Route exact path="/" component={Main} />
        <Route path="/list" component={List} />
        <Route path="/tasks" component={Tasks} />
      </Switch>
    </main>
    <Footer />
  </div>
);

如果我访问“/列表”，我希望看到：

Some Header Thing
Home
Some Footer Thing

Some Header Thing
List
Some Footer Thing

Register

Not Found

如果我访问“/注册”，我希望看到：

Some Header Thing
Home
Some Footer Thing

Some Header Thing
List
Some Footer Thing

Register

Not Found

如果我访问“/foobar”，我希望看到：

Some Header Thing
Home
Some Footer Thing

Some Header Thing
List
Some Footer Thing

Register

Not Found

---

下面的内容将使路由正常工作，对代码进行相对较小的调整，因为我不想假设太多，所以我很犹豫是否要重新构造东西。但正如您所看到的，这导致使用“Home”组件导入所有带有页眉和页脚的部分，而“notfound”则捕获其余部分。然而，它确实会使很多东西变得平坦，这可能会因为很多路线而变得笨拙

const App = () => (
  <BrowserRouter>
    <Switch>
      <Route path="/register" render={() => <div>Register</div>} />
      <Route path="/signin" render={() => <div>Sign in</div>} />
      <Route path="/list" component={Home} />
      <Route path="/tasks" component={Home} />
      <Route exact path="/" component={Home} />
      <Route render={() => <div>Not Found</div>} />
    </Switch>
  </BrowserRouter>
);

const Home = () => (
  <div>
    <header>Some Header Thing</header>
    <main>
      <Switch>
        <Route path="/list" render={() => <div>List</div>} />
        <Route path="/tasks" render={() => <div>Tasks</div>} />
        <Route path="/" render={() => <div>Home</div>} />
      </Switch>
    </main>
    <footer>Some Footer Thing</footer>
  </div>
);

---

其中，

Home

将呈现您现有组件的一个版本，

Signin

将带您进入一个类似于

App

组件的组件。您也可以在

App

中保留“未找到”路由。是的，我想这是可行的，尽管正如您所建议的，我确实觉得我正在重新实现旧的v3路由器配置。感觉像这样的事情不应该那么难，所以很可能是我对V4API缺乏全面的掌握。我会一直戳它，并记住你的建议。