Tengo un <NotFound /> que me gustaría mostrar si el usuario va a la ruta /404 . El único problema es que me gustaría mostrar solo este componente y no los otros, como <Nav /> y <Footer /> .
¿Hay alguna manera de que pueda return de alguna manera si la ruta es /404 para que los otros componentes no se representen?
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;
Nav la navegación y el pie de Footer en otros componentes Switch y Route . Si la ruta es "/404" , el componente NotFound se procesa; de lo contrario, la ruta "/" se compara y se procesa, y el Switch y las rutas que representa se combinarán condicionalmente como de costumbre.
Ejemplo:
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>
);
}