NavBar вне коммутатора

Question

Приложение. 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.url или path is '/'), что является большим позором, так как мне это тоже нужно. Есть идеи?

Answer 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>