Не работает redirect react

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

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

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

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

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

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

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

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

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

5 ответов

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

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

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

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

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

Источник

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 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 для рендеринга компонента, переданного пропсу компонента. Если мы передадим ему функцию, то он создаст новый компонент при каждом рендере, вместо того, чтобы просто обновить уже существующий компонент.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Email подписка!

Источник

How to use Redirect in the new react-router-dom of Reactjs

I am using the last version react-router module, named react-router-dom, that has become the default when developing web applications with React. I want to know how to make a redirection after a POST request. I have been making this code, but after the request, nothing happens. I review on the web, but all the data is about previous versions of the react router, and no with the last update.

14 Answers 14

You have to use setState to set a property that will render the inside your render() method.

That said, I would suggest you to put the API call inside a service or something. Then you could just use the history object to route programatically. This is how the integration with redux works.

But I guess you have your reasons to do it this way.

Here a small example as response to the title as all mentioned examples are complicated in my opinion as well as the official one.

You should know how to transpile es2015 as well as make your server able to handle the redirect. Here is a snippet for express. More info related to this can be found here.

Make sure to put this below all other routes.

React Router v5 now allows you to simply redirect using history.push() thanks to the useHistory() hook:

Simply call it inside any function you like.

Try something like this.

you can write a hoc for this purpose and write a method call redirect, here is the code:

The simplest solution to navigate to another component is( Example navigates to mails component by click on icon):

Источник