Блог

Главная - Вопросы по программированию - Непроходимый компонент React не обновляется при изменении маршрута

Непроходимый компонент React не обновляется при изменении маршрута

#javascript #reactjs #react-router

#javascript #reactjs #react-маршрутизатор

Вопрос:

В моем приложении React есть компонент заголовка, который находится внутри компонента маршрутизатора, но, конечно, не маршрутизируется. По какой-то причине при изменении маршрута заголовок не обновляется. Он даже не проверяет, нужно ли его обновлять. В заголовке есть область, которую необходимо изменить в зависимости от текущего URL, так что это проблема. Я даже пытался передать текущий URL-адрес в качестве реквизита, но, похоже, он даже не заметил изменения. Вот App.js способ рендеринга:

           return (
            <div style={s.appContainer}>
              <Router>
                <Header
                  user={this.state.user}
                  style={s.header}
                  dataLoaded={this.state.dataLoaded}
                />
                <div style={s.content}>
                  <Route path='/app/v2/reports'>
                    <ReportContainer user={this.state.user}/>
                  </Route>
                  <Route path='/app/v2/groups'>
                    <CourseContainer user={this.state.user}/>
                  </Route>
                  <Route exact={true} path='/app/v2/people'>
                    <PeopleContainer/>
                  </Route>
                  <Route path='/app/v2/people/:email' component={UserDetailsContainer} />
                  <Route path='/app/v2/lessons/:lesson_id' component={LessonDetailsContainer} />
                  <Route exact={true} path='/app/v2/learning/library' component={LearnerLibraryContainer} />
                  <Route exact={true} path='/app/v2' component={DashboardContainer} />
                </div>
              </Router>
            </div>
          )

Я не могу поделиться большей частью заголовка, но этот метод является частью, которая пытается проверить URL:

   inLearnerMode() {
    const currentPath = window.location.href || '';
    return currentPath.includes('learning')
  }

Комментарии:

1. покажите нам код заголовка, а также то, что вам там нужно *?

2. Я добавил все, что мог. Код в заголовке работает, проблема в том, что при изменении маршрута компонент приложения не выполняет повторную визуализацию, поэтому мне нужен какой-то способ вызвать повторную визуализацию заголовка. Я подтвердил это, вставив ShouldComponentUpdate метод в заголовок с инструкцией log, и он не вызывается.

3. Используется ли класс component или functional?

4. Компонент класса.

Ответ №1:

Попробуйте обернуть компонент заголовка с помощью withrouter HOC, тогда вы сможете получить доступ к текущему местоположению, используя переданные вашему компоненту реквизиты, поэтому ваш компонент должен выглядеть так :

 ...
import { withRouter } from 'react-router-dom';
...


class Header extends React.Component {
  
  

  inLearnerMode() {
    const { location } = this.props;
    const currentPath = location.pathname || '';
    return currentPath.includes('learning')
  }
  
  render() {
    ...
  }
}

export default withRouter(Header)

Комментарии:

1. Ах, вот чего мне не хватало! Единственное, что location включаемый объект не имеет href свойства. Вместо этого мне пришлось использовать pathname свойство для него. Однако, как только я исправил, что он работал отлично, большое вам спасибо.

Метки: