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

У вас есть вопрос относительно реактивного маршрутизатора.

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

В настоящее время у меня есть мой <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>


reactjs react-router-dom react-router
person Petter Östergren    schedule 18.10.2017    source источник
comment
Вы пробовали ‹Header /› внутри ‹Router›, используя div над ‹Header /›?   -  person dpetrini    schedule 18.10.2017
comment
Ваша проблема в том, что ваши компоненты маршрута не перерисовываются, когда вы нажимаете навигационные ссылки? т.е. перемещение из /category1 в /category2   -  person Steve Holgado    schedule 18.10.2017
comment
@dpetrini Я этого не пробовал.   -  person Petter Östergren    schedule 18.10.2017
comment
@SteveHolgado Это правильно   -  person Petter Östergren    schedule 18.10.2017

Ответы (2)


arrow_upward
2
arrow_downward

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

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>
    );
  }
}
person dpetrini    schedule 18.10.2017

arrow_upward
1
arrow_downward

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

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

...

componentWillReceiveProps(nextProps) {

  // Update component using nextProps

}

...
person Steve Holgado    schedule 18.10.2017