Перенаправления в React Router DOM

Краткое и простое руководство по реализации перенаправления в вашем приложении React

Я только что завершил свой проект мода 4 на семинаре по программированию Flatiron (почти готов!), И мне потребовалось включить как минимум два маршрута в мое одностраничное приложение. React Router хорош тем, что позволяет программно перемещаться в одностраничном приложении. В моем случае один из моих маршрутов будет доступен только в том случае, если пользователь вошел в систему, поэтому, если кто-то попытается получить доступ к своему /profile маршруту без успешного входа в систему, его нужно будет перенаправить обратно на домашнюю страницу. Как вы можете просмотреть свой профиль, если вы не вошли в систему? В этом нет никакого смысла.

Ваша ситуация может быть другой, но вот основы.

1. Перенаправление импорта

Оказывается, <Redirect /> встроен в модель React Router DOM, поэтому все, что вам нужно сделать, это импортировать ее в начало файла. Если вы еще этого не сделали, вам нужно установить response-router-dom с помощью npm. Когда все будет готово, импортируйте перенаправление в соответствующий файл / компонент как таковой:

import { Redirect } from "react-router-dom";

Есть много компонентов, которые вы можете импортировать из response-router-dom, поэтому убедитесь, что вы импортируете все, что вам может понадобиться, в свой файл. Например:

import { Redirect, Route, NavLink } from "react-router-dom";

2. Определите условия перенаправления

Есть много разных случаев, когда вы можете захотеть перенаправить пользователя на свою страницу. В моем случае мне нужно было перенаправить пользователя обратно на домашнюю страницу, если он пытался получить доступ к маршруту /profile без входа в систему.

Как мы это проверим? Что ж, если использовать авторизацию токена, мы могли бы просто проверить, есть ли значение токена, отличное от null. Мы также можем проверить, существует ли currentUser в состоянии, предполагая, что он изначально был сохранен в состоянии.

Какие еще условия могут потребовать от нас перенаправления пользователя? Назвать несколько…

• Пользователь пытается получить доступ к странице, доступ к которой ограничен.
• Пользователь пытается получить доступ к странице, которая больше не существует
• В адресной строке введен неверный путь (типичная опечатка)
• Произошел успешный вход в систему, и нам нужно перейти с экрана входа на главную страницу или панель управления.

Когда мы используем редиректы?

В общем, если нам нужно изменить наш URL-путь без того, чтобы пользователь намеренно щелкнул ссылку на этот путь, нам может потребоваться перенаправление. Во многих случаях нам нужно сделать это без перезагрузки страницы. Перенаправления дополняют настройку нашего маршрутизатора, но не могут работать сами по себе (программа должна знать, что именно она отображает при перенаправлении!).

3. Выполните условную визуализацию компонента перенаправления.

Для этого вы можете использовать тернарные операторы или переключать регистры. Чтобы обновить троичные файлы:

thingThatReturnsTrueOrFalse ? thingThatHappensIfTrue : thingIfFalse

Вам понадобится этот троичный элемент, чтобы он располагался где-нибудь в визуализированной части компонента. Я бился головой о кирпичную стену, заставляя работать перенаправления, прежде чем понял это. Недостаточно просто вернуть перенаправление где-нибудь в коде, нужно на самом деле визуализировать.

Во-первых, давайте рассмотрим, как выглядит компонент перенаправления.

<Redirect to="/path-you-want-to-redirect-to" />

Довольно просто.

Вот пример того, как может выглядеть компонент с условным перенаправлением:

const profilePage = (props) => {
  return(<div>
     {*/ bits of JSX */}
     {*/ some React component */}
     {*/ more bits of JSX */}
     {*/ maybe like a form or something idk */}
     { props.loggedIn ? null : <Redirect to="/login" /> }
     </div>)
}

В приведенном выше примере props.loggedIn будет логическим значением, переданным в качестве свойств компонента из родительского состояния. Чтобы перевести этот троичный язык на английский язык: «Если мы вошли в систему, дайте нам ноль (или ничего), но если мы не вошли в систему, то верните компонент перенаправления, который приведет нас к пути страницы входа».

Бонус: перенаправление с

Перенаправления позволяют вам перенаправить от определенного, который может больше не существовать. Рассмотрите возможность изменения структуры сайта таким образом, что любой, у кого старый путь сохранен в избранное, внезапно столкнется с ошибкой. Теперь мы могли бы просто позволить этим людям разобраться в этом и перейти на главную страницу, но это не лучший UX в мире. Вот как мы можем отловить эти сценарии:

<Switch>
  <Redirect from='/users/:id' to='/users/profile/:id'/>
  <Route path='/users/profile/:id'>
    <Profile />
  </Route>
</Switch>

Перенаправление позволяет вам определить, куда перенаправлять от, а также куда перенаправлять на. Эта функция может пригодиться в ваших проектах.

Резюме

• Перенаправления являются частью response-router-dom и должны быть импортированы в файл, который вы планируете использовать для перенаправления в
• Перенаправления - это реагирующие компоненты, которые должны быть обработаны для работы.
• Основной синтаксис перенаправления: <Redirect to="/path" />
• Для перенаправления в определенных условиях используйте тернарный оператор или переключатель case.