reactjs - 如何停止在 Reactjs 中的 404 错误页面等特定页面上显示导航栏？

Question

我已经开始学习 Reactjs。我正在尝试构建一个多页面 webapp 和。正如您从我的代码中看到的那样，有一个导航栏和 switch 语句。开关标签的最后一行是未找到的页面，在该页面上我希望不显示任何导航栏。我找不到实现它的方法。

如何在 404 错误页面中禁用导航栏？

function App() {
  return (

    <BrowserRouter>
      <>
        <div className="container">
        <Navbar />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/about" component={About} />
          <Route exact path="/contact" component={Contact} />
          <Route component={Pagenotfound} />
        </Switch>

        </div>
      </>
    </BrowserRouter>
  );
}

export default App;

Answer 1

最简单的方法是:

function App() {
  return (
    <BrowserRouter>
      <>
        <div className="container">
         <Switch>
          <Route exact path="/">
             <Navbar />
             <Home />
          </Route>
          <Route exact path="/about">
             <Navbar />
             <About />
          </Route>
          <Route exact path="/contact">
             <Navbar />
             <Contact />
          </Route>
          <Route component={Pagenotfound} />
         </Switch>
        </div>
      </>
    </BrowserRouter>
  );
}

export default App;

现在，这种方法的问题是您需要多次编写 Navbar。为了尽量减少这种情况，您可以编写一个功能组件，例如 Route 的包装器。例如:

function RouteWithNavBar({component:Component, ...rest}){
return
 (
   <Route {...rest}>
    <Navbar />
    <Component />
   </Route>
 );
}

然后而不是使用

<Route exact path="/" component={Home} />

，你可以使用

<RouteWithNavBar exact path="/" component={Home} />