我已经开始学习 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;
最佳答案
最简单的方法是:
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} />
关于reactjs - 如何停止在 Reactjs 中的 404 错误页面等特定页面上显示导航栏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61969490/