Почему не работает redirect react

React Router не работает

Я настроил реактивный маршрутизатор для перенаправления любого неизвестного URL-адреса на «/»:

Сервер настроен правильно для перенаправления любых неизвестных URL-адресов в /index.html , который выглядит так:

React Router 2.8.1 Поведение

/clock правильно маршрутизируется на ClockPage /clock/est (который является неизвестным маршрутом) даже не загружает приложение. Сервер правильно отправляет /index.html , но файлы css и js не загружаются, потому что браузер запрашивает /clock/main.css и /clock/main.js — которых не существует! Чтобы исправить эту проблему, я включил в свой index.html. Теперь браузер правильно запрашивает /main.css и /main.js и приложение загружается правильно. Он также перенаправляет на «/», потому что /clock/est — неизвестный маршрут. Однако я получаю это предупреждение в консоли браузера:

Предупреждение. Автоматическая установка basename с использованием устарела и будет удалена в следующем главном выпуске. Семантика тонко отличается от базового. Пожалуйста, передайте базовое имя явно в параметрах createHistory

React Router 3.0.0 Поведение

На данный момент я переключился на реактивный маршрутизатор версии 3.0.0 (сохраняя ), и предупреждение исчезнет. Неизвестный маршрут по-прежнему правильно перенаправляется на «/».

Поэтому мои вопросы:

Включает ли action-router 3.0.0 использование Является ли мое решение лучшим способом перенаправления неизвестных URL-адресов на «/»?

Предположим, что я переключусь на response-router 3.0.0.

Источник

React: Как сделать редирект в React?

При нажатии кнопки входа в систему отображается вывод журнала консоли «Перенаправление . ». Но компонент приветствия не отображается. Также не регистрируются ошибки.

Стоит ли использовать Route? Что мне не хватает? Я только начинаю реагировать. Пожалуйста, разместите любые ссылки, которые могут помочь мне понять больше.

2 ответа

То, что происходит в вашем коде, в основном заключается в том, что функция возвращает объект реакции, но не отображает его, поэтому вы видите консоль, но перенаправления не происходит. Если вы хотите, чтобы это работало, используйте if (isLooged), возвращайте значение вне функции «onFinish». Таким образом, он может выполнять рендеринг на Dom и успешно перенаправлять.

Кроме того, вы должны определить маршруты, как указано ниже, если вы хотите, чтобы перенаправление работало. Проверьте приведенный ниже код и таким же образом установите маршруты и поток входа.

Вы должны определить маршруты, как указано ниже, если вы хотите, чтобы Redirect работал

После этого ваше перенаправление должно работать, вы также можете использовать , как указано в первом ответе.

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

Дополнительную информацию можно найти на странице https://reactrouter.com/web/guides/quick-start

Вам следует использовать history api от react-router-dom . Вы можете получить к нему доступ с помощью крючка useHistory .

Источник

React Router V4 перенаправление не работает

у меня есть маршрут, который перенаправляет после проверки состояния такой

url-адрес изменяется, когда условие истинно, но компонент не монтируется. Остальная часть кода компонента приведена ниже.

мой компонент приложения содержится в BrowserRouter, как thi

когда я нажимаю url-адрес непосредственно в браузере, например, компонент «localhost: 3000 / intro» успешно монтируется, но когда он проходит перенаправление не отображает компонент. Как это исправить?

редактировать

Итак, одна деталь отсутствовала, и я попытался создать другой проект для воспроизведения проблемы. Мой компонент приложения является наблюдателем от mobx-react и экспортируется, как показано ниже

Я создал это РЕПО с образцом кода, чтобы воспроизвести проблему, которую вы можете использовать https://github.com/mdanishs/mobxtest/

так когда компоненты обернуты в наблюдателя mobx-react redirect не работает, иначе он работает нормально

3 ответов

спрашивающий написал вопрос на GitHub, и получил это, по-видимому, неопубликованное скрытый руководства (edit: now опубликовано) это мне тоже помогло. Я размещаю его здесь, потому что столкнулся с той же проблемой и хочу, чтобы другие избегали нашей боли.

проблема в том, что mobx-react и react-redux оба поставляют свои собственные shouldComponentUpdate() функции, которые только проверяют изменения prop, но реагируют-маршрутизатор отправляет состояние вниз через контекст. Когда расположение изменения, он не меняет реквизит, поэтому он не запускает обновление.

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

вы пропускаете a / перед введением

будьте осторожны при составлении маршрутизатора с другими компонентами, такими как поставщики переводов, поставщики тем и т. д.. Через некоторое время я обнаружил, что ваше приложение должно быть строго обернуто маршрутизатором, например:

Источник

Подробно о React Router. Часть 3— редиректы, передача props компоненту роута и вложенные роуты +бонус

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

p.s статья описывает самый распространенную версию роутера на данный момент. 6я версия сейчас находится в альфе и имеет кардинально другой синтаксис.

Передаём пропсы компоненту роута

Мы видели несколько примеров и рабочих кейсов в React роутере. Один из них это передача пропсов напрямую компоненту самого роута.

В React-router это делается очень легко. Давайте создадим новый роут для передачи props его компоненту.

Прямо сейчас мы добавили компонент и новую страницу. Давайте передарим пропс title уже самой странице.

Есть два способа это сделать. Первый очень простой.

Передаём функцию как пропс компонента в компоненте роута

Эта штука сработает, но такой подход не рекомендуется применять с роутером. Почему? Сейчас объясню.

Под капотом React использует React.createElement для рендеринга компонента, переданного пропсу компонента. Если мы передадим ему функцию, то он создаст новый компонент при каждом рендере, вместо того, чтобы просто обновить уже существующий компонент.

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

Роутер даёт нам довольно простое решение в этой ситуации. Вместо простой передачи функции через пропсы component , мы можем передать их через пропсы render . Передавая наши пропсы, нам также надо передать дефолтные пропсы к пропсам рендеринга. Давайте посмотрим пример:

Вот это уже рекомендуемый способ передачи самих пропсов в React роутере.

Это очень просто. Если вы хотите увидеть весь пример, то проверьте его тут.

Редиректим роуты

В основном редиректы используют при проверке пользователей на авторизацию, если пользователь не авторизован, то его перенаправит на соответствующую страницу.

Вообще, всё это очень легко сделать с использованием компонента Redirect .

Давайте посмотрим на простой пример того, как он работает. Давайте создадим простую страницу, которая перенаправит на другую страницу основываясь на заданных условиях.

Давайте перенаправим с /old-route на /new-route

Простой пример редиректа

Добавляем роут редиректа в наш пример.

Сейчас мы создадим два URL.

/old-route это старый URL, с которого будет редирект на новый URL /new-route , используя компонент Redirect.

Тут вы увидите, что старая ссылка редиректит на новую ссылку и тут же показывает его в браузере.

Редирект посложнее, основанный на пропсах

Тут мы сделаем небольшую страничку, которая будет редиректить на дашборд, если пропс isLoggedin будет true или покажем простое сообщение в случае с false .

Давайте сначала сделаем страничку.

Давайте укажем роут для страниц Auth и Dashboard :

Теперь можете всё проверить сами. Роут редиректит и меняет URL в браузере на /dashboard , когда мы передаем isLoggedIn как true . И в свою очередь показывает простое сообщение для неавторизованных пользователей.

Вложенные роуты и контент

До этого мы видели простые примеры работы с реакт роутером. А сейчас мы разберемся с тем, как работать с вложенными роутами. Перед тем как углубиться в них давайте поймем, что же это такое?

Примеры вложенных роутов

Этот роут показывает всех пользователей.

Вложение первого уровня:

Эти примеры роутов показывают конкретного пользователя. Param и miguel это userId используемые для получения данных о конкретных пользователях.

Вложение второго уровня:

www.example.com/user/param/employer Этот роут получает простую информацию о пользователе и также информацию о его работодателе. Так что можно сказать, что это вложенные роуты. А вложения второго уровня уже зависят от параметров вложения первого уровня ( userId: param )

Давайте начнем с конкретного примера. Мы собираемся показать пользователей и затем вывести детальную информацию о них.

Вложенные роуты в React Router

Для примера мы возьмем вот эти данные:

В этом примере есть несколько пользователей и каждый из них имеет разное количество вложенных табов, в каждом из которых есть имя и контент, который мы покажем.

Используя эти данные мы создадим эти роуты:

Вложение первого уровня:

Вложения второго уровня:

Показываем вложения первого уровня

Тут мы пробегаемся по всем данным пользователей и показываем ссылку на каждого пользователя с данными о нем.

Также мы указываем схему роутов для пользователей. userName это параметр, передающийся компоненту UserPage .

Компонент UserPage покажет простую информацию о конкретном пользователе.

React роутер передаст пропсы match и мы сразу получим информацию о пользователе используя значение userName .

Показываем вложенные роуты как табы

Пропс match отдаёт нам url через match.url , который можно использовать для создания вложенных роутов.

Тут мы создаем вложенные роуты, используя информацию для табов у каждого пользователя.

match.path уже выдаёт нам имя пути. Его мы будем использовать для указания вложенной схемы роута.

Но зачем использовать match.path , а не match.url ?

Потому что match.path содержит настоящий путь, то есть user/:userName , где match.url уже готовый url user/Param.

Именно поэтому match.url находится в Link, а match.path используется в определении роута.

tabName это параметр роута, который мы передаём компоненту TabPage . Он использует его для нахождения точного таба и показывает сам контент непосредственно в табе. Давайте глянем на код.

Пропсы match отдадут нам все params в URL userName , tabName

Находим таб в наших данных, используя оба параметра

Показываем информацию таба

Следовательно, мы показали вложенные роуты и вложенный контент в этом примере.

Посмотрим пример в действии.

БОНУС: Используем для указания того, какой элемент активен в панели навигации

В React роутере есть и
компоненты. Далее мы рассмотрим разницу между ними и то, как можно было бы использовать для указания того, какая именно ссылка активна в панели навигации приложения.

Оба компонента и

могут быть использованы для создания удобной навигации в приложении. Внутри обоих компонентов мы можем использовать атрибут to для указания пути ведущему по ссылке. После установки react-router-dom и импорта

, всё связанное с ним будет выглядеть так:

Вы можете также импортировать и :

Оба они компилируются в html код, как тут:

Может показаться, что основной их функционал одинаков. Так зачем же нам тогда оба? А затем, что идёт вместе с дополнительным атрибутом стилизации, который позволяет нам стилизовать по особенному именно активную ссылку.

Компонент NavBar даёт нам навигацию по четырём роутам — “ / ”, “ /search ”, “ map ” и “ login ” с использованием старого доброго компонента
.

Как показано выше, мы можем вполне успешно прыгать по роутам, каждый из которых ассоциирован с компонентом
.

А теперь давайте посмотрим на различия между двумя компонентами. даёт нам дополнительный атрибут activeClassName . В этом атрибуте мы можем указывать класс в CSS, который будет выделять то, что ссылка активна.

CSS селекторы описанные ниже, рендерят линию подчеркивания в тех случаях, когда мы наводим на ссылку и когда она открыта и активна.

С помощью , мы можем добавить атрибуты стилизации для активных элементов, чей путь совпадает с URL в браузере.

Email подписка!

• Интересные новости
• Полезные статьи
• Сниппеты кода
• Много интересного

Источник

What is the best way to redirect a page using React Router? [closed]

Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.

Closed 4 months ago .

I am new to React Router and learn that there are so many ways to redirect a page:

In React Router v4, there’s this.context.history.push(«/path») and this.props.history.push(«/path») . Details: How to push to History in React Router v4?

I’m so confused by all these options, is there a best way to redirect a page?

5 Answers 5

Actually it depends on your use case.

1) You want to protect your route from unauthorized users

If that is the case you can use the component called and can implement the following logic:

Keep in mind that if you want to work the way you expect, you should place it inside of your component’s render method so that it should eventually be considered as a DOM element, otherwise it won’t work.

2) You want to redirect after a certain action (let’s say after creating an item)

In that case you can use history:

In order to have access to history, you can wrap your component with an HOC called withRouter . When you wrap your component with it, it passes match location and history props. For more detail please have a look at the official documentation for withRouter.

If your component is a child of a component, i.e. if it is something like , you don’t have to wrap your component with withRouter , because passes match , location , and history to its child.

3) Redirect after clicking some element

There are two options here. You can use history.push() by passing it to an onClick event:

or you can use a
component:

I think the rule of thumb with this case is to try to use
first, I suppose especially because of performance.

Источник