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 - stackoverflow.com/a/43284528/7867822 — Anurag Srivastava
– Anurag Srivastava, Commented Apr 4, 2021 at 8:09

Exifers · Accepted Answer · 2021-04-04 08:23:26Z

1

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.

edited Apr 4, 2021 at 8:23

answered Apr 4, 2021 at 8:18

Exifers

2,9322 gold badges17 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tony Over a year ago

It worked mate!Thanks! Now I start getting it how these things work!

Collectives™ on Stack Overflow

Error Page in ReactJS is rendered below every single page component

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related