React маршрутизатор V4 NavLink активный маршрут

Я пытаюсь перенести свой проект с V3 из react-router на v4 из того, что теперь называется react-router-dom. Теперь проблемы возникают, когда у меня есть компонент MenuBar, который полностью отделен от логики маршрутизации (как вы и ожидали), потому что он будет показывать те же самые ссылки, независимо от текущего пути. Теперь это хорошо работало с v3, но теперь, когда я использую NavLink, который имеет то же самое свойство activeClassName, активный маршрут не обновляется на NavBar, только на refresh. Это кажется немного глупым, так что ... должен быть способ обойти это.

export default @inject('ui') @observer class App extends Component {
  render() {
    return (
      <Router>
        <div className={ styles.wrapper }>
          <Sidebar />
          <main className={ `${styles.main} ${!this.props.ui.menuOpen && styles.closed}` }>
            <Route exact path="/" component={ HomePage } />
            <Route path="/signup" component={ SignUpPage } />
            <Route path="/login" component={ LoginPage } />
            <Route path="/about" component={ AboutPage } />
          </main>
          <footer className="site-footer"></footer>
        </div>
      </Router>
    );
  }
}

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

Что я должен добавить, чтобы они снова заработали? (Они правильно работают при обновлении страницы)

1 7
javascript reactjs react-router react-router-v4

1 ответ:

Основываясь на использовании декоратора @observer, создается впечатление, что вы используете mobx-react. Суть observer в том, что он реализует shouldComponentUpdate для оптимизации производительности рендеринга. Этот вызов sCU будет смотреть на текущий и следующий реквизиты, и если нет разницы, он не будет повторно отображаться. Это проблема, потому что по умолчанию React Router использует контекст для передачи данных и полагается на повторную визуализацию элементов для получения обновленных значений, но observer ' s sCU не имеет способа обнаружить контекст изменения.

Способ обойти это-передать объект location в качестве опоры компоненту, обернутому в observer. Затем, когда местоположение изменится, observer ' s shouldComponentUpdate обнаружит разницу и повторно визуализирует.

Дополнительную информацию можно найти в руководствезаблокированные обновления .

4