当用户打开 '/'
或 '/details'
路由时,我尝试在我的路由中使用通用的 Header
组件。另外,我不想在用户打开 '/menu'
路由时显示这个常见的 Header
组件。
这是我的代码:
<Router>
<Switch>
<Header />
<Route exact path="/">
<Home />
</Route>
<Route exact path="/details">
<Details />
</Route>
</Switch>
<Switch>
<Route exact path="/menu">
<Menu />
</Route>
</Switch>
</Router>;
在这种情况下,即使我加载 '/menu'
路由,我也会看到常见的 Header
组件,这不是我想要做的。我做错了什么?
最佳答案
该组件<Header />
在定义路由的全局级别中,因此它对每个组件都可见。您可以做的是为每个页面定义一个布局,而不是这种方法,就像在主页中一样:
render() {
return(
<div>
<Header />
{ this.props.children }
/* anything else you want to appear on every page that uses this layout */
<Footer />
</div>
);
}
在菜单中您可以删除标题:
render() {
return(
<div>
{ this.props.children }
/* anything else you want to appear on every page that uses this layout */
<Footer />
</div>
);
}
希望对你有帮助
关于javascript - React router dom在一种情况下显示公共(public)组件并在另一种情况下隐藏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60015674/