ReactJS 中的错误页面呈现在每个页面组件下方

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. Ie 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>
    
  )
}

Answer 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 .