React Router отображает один компонент для всех маршрутов (заголовок)

Question

Есть вопрос относительно реакции роутера.

У меня есть элемент заголовка, который я хотел бы отобразить для всех маршрутов. И, конечно же, я хочу, чтобы это было частью того, чтобы пользователь мог щелкать элементы из навигационной панели.

В настоящее время у меня есть мой <Header /> за пределами моего <Router> и я думаю, что это не работает, так как мой маршрутизатор не знает, чтобы сделать рендер?

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
  <div>
    <Header />
    <Router>
      <Switch>
        <Route exact path="/" component={Posts} />
        <Route exact path="/:category/:postId" component={PostDetails} />
        <Route path="/:category" component={CategoryView} />
      </Switch>
    </Router>
  </div>

И мой заголовок имеет, например, <Link to="/">LOGO</Link>

Answer 1

Мой комментарий в ответе:

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div> 
          <Header />
          <Switch>
           <Route exact path="/" component={Posts} />
           <Route exact path="/:category/:postId" component={PostDetails} />
           <Route path="/:category" component={CategoryView} /
          </Switch>
          <Footer />
        </div>
      </BrowserRouter>
    );
  }
}

Answer 2

Когда вы меняете местоположение, но совпадает тот же маршрут, ваш компонент не перемонтируется, а только получает новые реквизиты.

Поэтому вы можете использовать ловушку componentWillReceiveProps для обновления вашего компонента с использованием новых параметров маршрута (например, nextProps.match.params.category):

...

componentWillReceiveProps(nextProps) {

  // Update component using nextProps

}

...