React Router - декларативное перенаправление с сохранением части пути

Question

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

Оригинал: /foo/users/12345

Обновлено: /bar/users/12345

Я попытался реализовать это с помощью перенаправления:

<Route path='/bar' component={MyComponent} />
<Route path='/foo'>
  <Redirect to='/bar' />
</Route>

Однако последняя часть запроса теряется при перенаправлении. Таким образом, запрос на /foo/users/12345 перенаправляет на /bar.

Есть ли декларативный способ пропустить часть /users/12345 моего пути в перенаправлении?

Answer 1

Я изучал документацию и не нашел ни одного готового решения для этого сценария, что вы объясняли в вопросе.

Вместо того, чтобы пытаться использовать Redirect Я создал функционалкомпонент, который был установлен в качестве компонента исходного маршрута. Это помогает в перенаправлении и может использоваться для этой цели, как показано ниже:

<Route path='/foo/:users?/:id?' component={RedirectHelper}/>
<Route path='/bar/:users?/:id?' component={MyComponent}/>

RedirectHelper выглядит следующим образом:

const RedirectHelper = (props) => {
  const {history} = props;
  const path = history.location.pathname.replace('/foo', '');
  history.push(`/bar${path}`);
  return null;
}

Так что технически компонент RedirectHelper подхватываетзначение из свойства history.location.pathname для исходного ~foo/users/12345 URL-адреса и создание нового. В конце он просто перенаправляет на ~bar/users/12345 URL. Срок действия оригинала был сохранен. Я проверил это решение и работал как шарм.

Надеюсь, это поможет!

Answer 2

Что, если вы добавите регулярное выражение в path

<Route path='/(bar|foo)/' component={MyComponent} />

В ответ здесь