开关外的导航栏

Posted 2023-02-22

【中文标题】开关外的导航栏

【英文标题】：NavBar outside Switch

【发布时间】：2020-05-04 18:00:26

【问题描述】：

App.js

 return (
<div>
  <NavBar />
  <Switch>
    <Route exact path='/' component=HomePage></Route>
    <Route path='/login' render=() => userCredentials.email ? <Redirect to='/' /> : <Form />></Route>
    <Route path='/register' render=() => userCredentials.email ? <Redirect to='/' /> : <Form />></Route>
    <Route path='/About' component=About></Route>
    <Route path='/Plot' component=Plot></Route>
    <Route path='/Profile' component=Profile></Route>
  </Switch>
</div> );

我需要 NavBar 出现在每个页面上，所以我将它放在 Switch 组件之外。但是，在执行此操作时，我从 withRouter 中丢失了 match 属性（match.url 或路径为“/”），这很遗憾，因为我也需要它。有什么想法吗？

【参考方案1】：

您可以同时匹配多个路由。你可以尝试这样的方法来匹配/ 没有确切的标志：

  <Switch>
    <Route path='/' component=NavBar /> // Will render on every route
    <Route exact path='/' component=HomePage></Route>
    <Route path='/login' render=() => userCredentials.email ? <Redirect to='/' /> : <Form />></Route>
    <Route path='/register' render=() => userCredentials.email ? <Redirect to='/' /> : <Form />></Route>
    <Route path='/About' component=About></Route>
    <Route path='/Plot' component=Plot></Route>
    <Route path='/Profile' component=Profile></Route>
  </Switch>