I have a <NotFound /> component which I would like to show if the user goes to the path /404. The only problem is I'd like to show only this component and not the other's such as <Nav /> and <Footer />.
Is there a way I can somehow return if the route is /404 so the other components aren't rendered?
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;
Render the Nav and Footer on another Switch and Route components. If the path is "/404" then the NotFound component is rendered, otherwise, the "/" route is matched and rendered and the Switch and routes it renders will be matched conditionally as per usual.
Example:
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>
);
}