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

Question

我设法使用 ReactJS 为自己创建了一个网站。一切正常，除了我最后添加的错误页面结果显示在呈现的所有其他页面下方。 IE。如果我转到 /localhost:3000/blog ，其中呈现了所有博客元素，在此页脚下方和页脚上方，还会呈现 Error404 组件。有什么建议可以扩展我目前有限的知识吗？应用程序组件是这样的：

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

您需要添加另一个 Switch 包装您的路线，以确保一次只呈现一个路线。

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

这里是working example.

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

Error Page in ReactJS is rendered below every single page component

javascript

router

reactjs