React-Router - ссылка против перенаправления против истории
Кажется, есть некоторая путаница с тем, что использовать вместо других:
<Link to='/some/path'><Redirect to='/some/path'/>history.push('/some/path')
Я уже некоторое время использую React / Router, и в разных сообщениях / ответах говорится по-разному о том, когда их использовать, и иногда они не совпадают с тем, что сказал кто-то другой. Так что я думаю, что мне нужно пояснение по этому поводу.
Из того, что я понимаю про Link и этот документация, это:
Provides declarative, accessible navigation around your application.
Из того, что я понимаю про Redirect и этот документация, это:
Will navigate to a new location. The new location will override the current location in the history stack, like server-side redirects (HTTP 3xx) do.
Похоже, что все сообщения, которые я прочитал, почти все используют Redirect для навигации по этому приложению, и никто никогда не рекомендует использовать Link, как в этом Почта.
Теперь history может делать то же самое, что и Link и Redirect, за исключением того, что у меня есть трассировка стека истории.
Вопрос 1: Когда мне нужно использовать Link против Redirect, какой вариант использования лучше другого?
Вопрос 2: Поскольку history может направлять пользователя в другое место в приложении с дополнительным бонусом в виде стека истории, всегда ли я должен просто использовать объект истории при маршрутизации?
Вопрос 3: Если я хочу маршрутизировать за пределами приложения, как лучше всего это сделать? Тег привязки, Window.location.href, Redirect, Link, ничего из вышеперечисленного?
Ответы 1
Во-первых, я бы очень рекомендовал прочитать этот сайт:
https://reacttraining.com/react-router/web/api/BrowserRouter
BrowserRouter React Router поддерживает стек истории за вас, а это означает, что вам редко нужно изменять его вручную.
Но чтобы ответить на ваши вопросы:
Ответ 1: Вы захотите использовать Link или NavLink почти во всех случаях использования. Redirect пригодится в определенных ситуациях, например, когда отображается страница 404, когда пользователь пытается получить доступ к неопределенному маршруту. Redirect перенаправит пользователя с маршрута 404 на новый маршрут по вашему выбору, а затем заменит последнюю запись в стеке истории перенаправленным маршрутом.
Это означает, что пользователь не сможет нажать кнопку возврата в браузере и вернуться к маршруту 404.
LinkNavLink и 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', чтобы предотвратить уязвимости
1.
Linkпозволяет перемещаться по приложению при нажатии на них. При рендерингеRedirectон автоматически помещает запись в стекhistory. 2. Например. щелчок поLinkтакже помещает запись в стекhistory, поэтому, если вы можете использоватьLinkдля своих целей, это обычно проще, чем манипулироватьhistoryсамостоятельно. 3. Обычная метка<a>работает отлично.