React router redirect не работает

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 Router v4 Redirect не работает

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

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

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

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

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

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

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

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

5 ответов

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

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

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

Или для редукса:

Вы должны визуализировать только Redirect в вашем методе визуализации:

Но вот мое любимое решение без использования компонента Redirect

1. import import < withRouter >from ‘react-router-dom’;
2. export default withRouter(MyComponent);
3. Наконец, в вашем методе действия предположим, что handlingButtonClick

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

Источник

React Router v4 Redirect not working

I have a route which redirects after checking a condition like this

The url changes when the condition is true but the component is not mounted. The rest of the component code is as below.

My App Component is contained with in the BrowserRouter like thi

when I hit the url directly in the browser like ‘localhost:3000/intro’ component is mounted successfully, but when it goes through the redirect it doesn’t display the component. How do I fix it?

So one detail was missing and I tried creating another project to reproduce the issue. My App component is a observer from mobx-react and it is exported as shown below

I have created this repo with a sample code to reproduce the issue you can use it https://github.com/mdanishs/mobxtest/

So when Components are wrapped into mobx-react observer the redirect is not working else it works fine

9 Answers 9

The asker posted an issue on GitHub, and got this apparently unpublished hidden guide (edit: now published) that helped me out too. I’m posting it here because I ran into the same problem and want others to avoid our pain.

The problem is that mobx-react and react-redux both supply their own shouldComponentUpdate() functions that only check for prop changes, but react-router sends state down through the context. When the location changes, it doesn’t change any props, so it doesn’t trigger an update.

The way around this is to pass the location down as a prop. The above guide lists several ways to do that, but the easiest is to just wrap the container with the withRouter() higher order component:

Источник

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 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 подписка!

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

Источник