Коммутатор React Router не монтирует один и тот же компонент для разных маршрутов
У меня есть эти маршруты
<Switch>
<Route path='/1' render = {() => <ComponentA />} />
<Route path='/2' render = {() => <ComponentA />} />
<Route path='/3' render = {() => <ComponentA />} />
</Switch>
Когда я нажимаю на приложение на странице / 1, ComponentA отображается нормально. Но когда я перехожу к / 2, ComponentA не перемонтируется, но функция рендеринга срабатывает.
Если я использую другой компонент, он будет правильно установлен.
ComponentA меняет основу для рендеринга на props, и действие по извлечению данных запускается в componentDidMount.
Это предполагаемое поведение, может показаться, что мы не предполагаем повторно использовать компонент для разных маршрутов.
Это интересный вопрос. Хотя я не знаю конкретного ответа на ваш вопрос, в более широком смысле, лучший способ сделать что-то вроде этого - использовать регулярное выражение в пути следующим образом: <Route path = "/ (1 | 2 | 3)" компонент = {ComponentA} />. Взято отсюда: stackoverflow.com/questions/40541994/…
Спасибо, ребята, за комментарии. Это очень общий пример проблемы, с которой я столкнулся. ComponentA - это компонент начального уровня, который извлекает шаблон извне на основе маршрутов. Единственная реальная причина, по которой я использую Switch, заключается в том, что у меня может быть страница по умолчанию, когда страницы не существуют.
Ответы 1
Просто вставьте уникальный ключ в ваши компоненты рендеринга - и я это исправлю.
<Switch>
<Route path='/1' render = {() => <ComponentA key = {1} />} />
<Route path='/2' render = {() => <ComponentA key = {2} />} />
<Route path='/3' render = {() => <ComponentA key = {3} />} />
</Switch>
Он работает как шарм! Могу ли я спросить, почему?
Просто любопытно, почему вы хотите рендерить один и тот же компонент в разных
routes? Модификацияpropsилиstateможет просто изменить компонент.