React router - Show only one component (skip default components)

nandesuka 0
Viewed 11

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;
react-router-dom react-router reactjs javascript
1 Answers

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>
  );
}
Drew Reese0
Related