Обеспечение повторной инициализации компонента при изменении параметров маршрута - PullRequest
0 голосов
/ 31 мая 2019

У меня определены следующие маршруты:

<Switch>
    <Route path="/" exact component={HomePage} />
    <Route path="/project/:id/search" component={SearchPage} />
    <Route path="/project/:id/upload" component={UploadPage} />
</Switch>

Проблема в том, что результаты поиска (локальное состояние компонента SearchPage) остаются при переходе на страницу поиска другого проекта. Я мог бы решить эту проблему, вручную очистив состояние в willReceiveProps при изменении идентификатора, но я хочу избежать этого, поскольку есть несколько подстраниц /project, для которых потребуется логика.

Использование render={()=> <SearchPage />} не имеет значения.

Как правильно обеспечить повторную инициализацию моих компонентов при изменении параметра в URL-адресе?

1 Ответ

0 голосов
/ 31 мая 2019

Вы можете использовать технику 'состояния сброса ключа': если специальная опора key отличается, React обязательно обновит элемент вместо обновления.

Так может быть

<Route 
  path="/project/:id/search" 
  render={({ match: {params: {id} } })=> <SearchPage key={id} />} 
/>

Для меня это плохо влияет на читабельность. Таким образом, использование componentDidUpdate (willReceiveProps устарело ) представляется более удобным для сопровождения.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...