React 路由器 - 仅显示一个组件（跳过默认组件）

Question

我有一个<NotFound />组件，如果用户转到路径/404 ，我想显示它。 唯一的问题是我只想显示这个组件而不是其他组件，例如<Nav />和<Footer /> 。

如果路线是/404 ，有没有办法以某种方式return ，这样其他组件就不会被渲染？

function App() {
  return (
    <>
    <Router>
      // I'd like to show only the <NotFound /> component if path is /404
      // not <Nav /> or the div below.
      <Route path="/404">
            <NotFound />
      </Route>
      <Nav />
      <div className="App">
        <Switch>
          <Route path="/projects">
            <Projects />
          </Route>
          <Route path="/">
            <div className='container'>
              <Header />
              <hr />
              ...
            </div>
          </Route>
        </Switch>
      </div>
      <Footer />
    </Router>
    </>
  );
}

export default App;

Answer 1

在另一个Switch和Route组件上渲染Nav和Footer 。 如果路径是"/404" ，则渲染NotFound组件，否则，匹配并渲染"/"路由，并且它渲染的Switch和路由将照常有条件地匹配。

例子：

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/404" component={NotFound} />
        <Route path="/">
          <Nav />
          <div className="App">
            <Switch>
              <Route path="/projects" component={Projects} />
              <Route path="/">
                <div className='container'>
                  <Header />
                  <hr />
                  ...
                </div>
              </Route>
            </Switch>
          </div>
          <Footer />
        </Route>
      </Switch>
    </Router>
  );
}