React router получает параметры соответствия, но не обновляет компонент - PullRequest
Новая
       33

React router получает параметры соответствия, но не обновляет компонент

1 голос
/ 11 июня 2019

Я использую реактивную модель для своего проекта. При изменении параметра маршрутизатора компонент не перерисовывается. Роутер выглядит так. 

<switch>
  <route exact path="/" render={()><homepage {...this.props}/> } />
  <route exact path="/practice-areas" component={PracticeAreasLandingPage}/>
  <route path="/practice-areas/:practiceAreasItem" component={PracticeAreas}/>} />
  <route component={ notfoundpage } />
</switch>

Компонент выглядит следующим образом. 

        class PracticeArea extends PureComponent {
        constructor(props) {
            super(props);
        }
        componentWillMount() {
            this.props.onInit();
        }
        render() {
            const pa = this.props.practiceArea;
            const randPas = this.props.randPracticeAreas;
        .... 
            export function mapDispatchToProps(dispatch) {
            return {
                onInit: () => {
                dispatch(loadPracticeArea());
                dispatch(loadRandomPracticeAreas());
                }
            };
            }
            const mapStateToProps = createStructuredSelector({
            practiceArea: makeSelectPracticeArea(),
            loading: makeSelectLoading(),
            error: makeSelectError(),
            randPracticeAreas: makeSelectRandomPracticeAreas(),
            randLoading: makeSelectRandomLoading(),
            randError: makeSelectRandomError(),
            });
            const withConnect = connect(
            mapStateToProps,
            mapDispatchToProps,
            );
            const withReducer = injectReducer({
            key: 'practiceArea',
            reducer
            });
            const withSaga = injectSaga({
            key: 'practiceArea',
            saga
            });
            export default compose(
            withReducer,
            withSaga,
            withConnect,
            )(PracticeArea);

При нажатии на ссылку, на которой есть маршрут, например «/ Practice-area / some-route», компонент не обновляется.

1 Ответ

0 голосов
/ 11 июня 2019

Попробуйте переместить PracticeAreas Маршрут до PracticeAreasLandingPage Маршрута 

<Switch>
  <Route exact path="/" render={()><homepage {...this.props}/> } />
  <Route path="/practice-areas/:practiceAreasItem" component={PracticeArea} />
  <Route path="/practice-areas" component={PracticeAreasLandingPage}/>
  <Route component={ NotFoundPage } />
</Switch>

Порядок Routes важен в компоненте Switch, так как он идет вниз по списку, чтобы найти path это удовлетворяется url.

Если вы перейдете к localhost:3000/practice-areas/123, а маршрут PracticeAreasLandingPage предшествует PracticeArea, вы все равно удовлетворяете необходимому условию для PracticeAreasLandingPage, которое просто "practice-areas ", так что Switch заканчивает рендеринг первым.И поскольку вы уже находитесь на этом маршруте, с самого начала создается впечатление, что ничего не было обновлено.

Изменение положения двух маршрутов решило бы эту проблему, потому что теперь вы говорите Switch идти вниз по маршруту.перечислите и проверьте, удовлетворяет ли url, localhost:3000/practice-areas/123 путь для PracticeArea "/practice-areas/:practiceAreasItem" первым.

...