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

Question

我设法使用 ReactJS 为自己创建了一个网站。 一切正常，除了我最后添加的错误页面结果显示在所有其他渲染页面的下方。 即，如果我将 go 到呈现所有博客元素的 /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包装您的 Route，以确保一次只渲染一个 Route。

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

这是一个工作示例。