Error Page in ReactJS is rendered below every single page component

Question

I managed to create a website for myself using ReactJS. Everything works fine except that my last addition of an Error Page turns out that is rendered underneath every other page that is rendered. I.e. if I go to /localhost:3000/blog where all the blog elements are rendered, underneath this and above footer the Error404 component is also rendered. Any advice so I can expand my so far limited knowledge? The app component is this:

const App = () => {
  return (
    <Router>
      <Switch>

        <Route exact path="/">
          <Home />
        </Route>
      
          <div className="appWrapper">
            <NavBar />


              <Route exact path="/blog">
                  <Blog />
              </Route>

              <Route exact path="/article/:id">
                        <Article />
                    </Route>

              <Route exact path="/contact">
                <ContactForm />
              </Route>
              
              <Route path="*">
                <Error404 />
              </Route>
              
            <Footer />
          </div>

      </Switch>
    </Router>
    
  )
}

Try removing `path="*"` for `Error404`. Related - https://stackoverflow.com/a/43284528/7867822 — Anurag Srivastava, Apr 04 '21 at 08:09

Emmanuel Meric de Bellefon · Accepted Answer · 2021-04-04T08:23:26.257

You need to add another Switch wrapping your Route's to make sure only one Route will render at a time.

const App = () => {
  return (
    <Router>
      <Switch>

        <Route exact path="/">
          <Home />
        </Route>
      
          <div className="appWrapper">
            <NavBar />
              <Switch>
              <Route exact path="/blog">
                  <Blog />
              </Route>

              <Route exact path="/article/:id">
                        <Article />
                    </Route>

              <Route exact path="/contact">
                <ContactForm />
              </Route>
              
              <Route path="*">
                <Error404 />
              </Route>
              </Switch>
            <Footer />
          </div>

      </Switch>
    </Router>
    
  )
}

Here is a working example.

It worked mate!Thanks! Now I start getting it how these things work! — Tony, Apr 04 '21 at 19:03

Error Page in ReactJS is rendered below every single page component

1 Answers1