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

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

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

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

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

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

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

2
djfdev 9 Окт 2019 в 19:32
Я не поняла вашего вопроса. Вы можете перефразировать? вы хотите изменить путь в URL-адресе, но отобразить конкретный компонент для другого пути?
 – 
Matthew Barbara
9 Окт 2019 в 19:45
Нет, я в основном хочу перенаправить /foo* на /bar*, где сохраняется часть, соответствующая значку splat.
 – 
djfdev
9 Окт 2019 в 19:51

2 ответа

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

Вместо того, чтобы пытаться использовать 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 для исходного URL ~foo/users/12345 и создает новый. В конце он просто перенаправляет на ~bar/users/12345 URL. Срок действия оригинала сохранен. Я протестировал это решение и работал отлично.

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

2
norbitrial 9 Окт 2019 в 20:56
Интересно ... это работает именно так, как я надеялся. Вы можете объяснить, почему мне нужно возвращать пустой div? Я замечаю, что если я возвращаю undefined, новый сегмент пути удваивается и работает некорректно.
 – 
djfdev
9 Окт 2019 в 20:42
RedirectHelper по-прежнему является компонентом, который должен возвращать либо действительный HTML, либо null. Решение - это всего лишь обходной путь, чтобы ваше требование работало. Хороший улов, позвольте мне обновить до null, он мне больше нравится. Я провел дополнительный тест со значением null, которое тоже сработало. Если решение работает и отвечает на ваш вопрос, не стесняйтесь принять его в качестве ответа, спасибо.
 – 
norbitrial
9 Окт 2019 в 20:57

Что, если вы поместите регулярное выражение в свой path

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

Как ответил здесь

1
Matthew Barbara 9 Окт 2019 в 20:01