React-Router v4 - ссылка против перенаправления против истории - PullRequest
Новая
       7

React-Router v4 - ссылка против перенаправления против истории

0 голосов
/ 30 июня 2018

Кажется, есть некоторая путаница с тем, что использовать над другим:

  • <Link to='/some/path'>
  • <Redirect to='/some/path'/>
  • history.push('/some/path')

Я уже некоторое время использую React / Router, и разные посты / ответы говорят о том, когда их использовать, и иногда они не совпадают с тем, что сказал кто-то другой. Поэтому я думаю, что мне нужно кое-что прояснить.

Из того, что я понимаю о Link и этой документации это:

Предоставляет декларативную и доступную навигацию по вашему приложению.

Из того, что я понимаю о Redirect и этой документации это:

Перейдет на новое место. Новое местоположение переопределит текущее местоположение в стеке истории, как это делают перенаправления на стороне сервера (HTTP 3xx).

Кажется, что все сообщения, которые я прочитал, почти все используют Redirect для навигации по этому приложению, и никто никогда не рекомендует использовать Link, как в этом сообщении .

Теперь history может делать то же самое, что и Link и Redirect, за исключением того, что у меня есть трассировка стека истории.

Вопрос 1: Когда я захочу использовать Link против Redirect, какой вариант использования над другим?

Вопрос 2: Поскольку history может направлять пользователя в другое приложение в приложении с дополнительным бонусом стека истории, я должен всегда просто использовать объект истории при маршрутизации?

Вопрос 3: Если я хочу направить за пределы приложения, какой лучший способ сделать это? Якорный тег, Window.location.href, Redirect, Link, ничего из вышеперечисленного?

1 Ответ

0 голосов
/ 30 июня 2018

Прежде всего, я бы очень рекомендовал прочитать этот сайт:
https://reacttraining.com/react-router/web/api/BrowserRouter

React Router BrowserRouter поддерживает стек истории, что означает, что вам редко требуется изменять его вручную.

Но чтобы ответить на ваши вопросы:
Ответ 1: Вы захотите использовать Link или NavLink почти во всех случаях. Redirect пригодится в определенных ситуациях, хотя, например, когда страница 404 отображается, когда пользователь пытается получить доступ к неопределенному маршруту. Redirect перенаправит пользователя с маршрута 404 на новый маршрут по вашему выбору, а затем заменит последнюю запись в стеке истории на перенаправленный маршрут.

Это означает, что пользователь не сможет нажать кнопку «Назад» своего браузера и вернуться к маршруту 404.

Link NavLink и Redirect все используют API истории маршрутизатора под капотом, использование этих компонентов вместо истории вручную означает, что вы в безопасности для любых изменений в API истории в будущем. Использование этих компонентов гарантирует ваш код на будущее.

Ответ 2: BrowserRouter Поддерживает стек истории для вас, как правило, я считаю, что вы хотите не обновлять его вручную, где можете.

Ответ 3: Вот несколько примеров внешних ссылок реакции: 

<Route path='/external' component={() => window.location = 'https://external.com/path'}/>

<a href='https://external.com/path' target='_blank' rel='noopener noreferrer'>Regular Anchor tags work great</a>

target='_blank' откроет ссылку в новой вкладке, но обязательно включите rel='noopener noreferrer' для предотвращения уязвимостей

...