React router-只显示一个组件(跳过默认组件)

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>
);
}