Question

我已经开始学习Reactjs。我试图建立一个多页的webapp和。从我的代码中可以看到，有一个导航栏和switch语句。 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} />

Answer 2

您可以这样做：

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

  </Switch>

</BrowserRouter>
  );
}
export default App;

Answer 3

尝试一下

import {
  BrowserRouter,
  Route,
  Switch,
  Redirect,
  useLocation
} from "react-router-dom";


function Navbar(){
 let location = useLocation();

  if(location.pathname === '/404'){
    return null;
  }

  return (<div>
     //...Your NavBar Code
    </div>)
}


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 path="*">
            <Redirect to="/404" />
          </Route>
          <Route path="/404" component={Pagenotfound} />
        </Switch>

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

export default App;

因此，基本上所有未定义的路径都将重定向到404，并且当路径为/ 404时，您的NavBar组件将返回null而不是navbar。让我知道您是否有问题。

如何在特定页面（例如Reactjs中的404错误页面）上停止显示导航栏？

3 个答案: