开关外的导航栏答案

【问题标题】：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 或路径为“/”），这很遗憾，因为我也需要它。有什么想法吗？

【问题讨论】：

标签： reactjs react-router-dom

【解决方案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>

【讨论】：