- Подробно о React Router. Часть 3— редиректы, передача props компоненту роута и вложенные роуты +бонус
- Передаём пропсы компоненту роута
- Передаём функцию как пропс компонента в компоненте роута
- Редиректим роуты
- Простой пример редиректа
- Редирект посложнее, основанный на пропсах
- Вложенные роуты и контент
- Примеры вложенных роутов
- Вложенные роуты в React Router
- Показываем вложения первого уровня
- Показываем вложенные роуты как табы
- БОНУС: Используем для указания того, какой элемент активен в панели навигации
- Email подписка!
- React: Как сделать редирект в React?
- 2 ответа
- What is the best way to redirect a page using React Router? [closed]
- 5 Answers 5
- How to do a redirect to another route with react-router?
- 7 Answers 7
- 1) react-router > V5 useHistory hook:
- 2) react-router > V4 withRouter HOC:
- 3) React-router browserHistory
- 4) Redux connected-react-router
- How to use Redirect in the new react-router-dom of Reactjs
- 14 Answers 14
Подробно о 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 роутере есть и
компоненты. Далее мы рассмотрим разницу между ними и то, как можно было бы использовать для указания того, какая именно ссылка активна в панели навигации приложения.
Оба компонента и
Вы можете также импортировать и :
Оба они компилируются в html код, как тут:
Может показаться, что основной их функционал одинаков. Так зачем же нам тогда оба? А затем, что идёт вместе с дополнительным атрибутом стилизации, который позволяет нам стилизовать по особенному именно активную ссылку.
Компонент NavBar даёт нам навигацию по четырём роутам — “ / ”, “ /search ”, “ map ” и “ login ” с использованием старого доброго компонента
.
Как показано выше, мы можем вполне успешно прыгать по роутам, каждый из которых ассоциирован с компонентом
.
А теперь давайте посмотрим на различия между двумя компонентами. даёт нам дополнительный атрибут activeClassName . В этом атрибуте мы можем указывать класс в CSS, который будет выделять то, что ссылка активна.
CSS селекторы описанные ниже, рендерят линию подчеркивания в тех случаях, когда мы наводим на ссылку и когда она открыта и активна.
С помощью , мы можем добавить атрибуты стилизации для активных элементов, чей путь совпадает с URL в браузере.
Email подписка!
- Интересные новости
- Полезные статьи
- Сниппеты кода
- Много интересного
Источник
React: Как сделать редирект в React?
При нажатии кнопки входа в систему отображается вывод журнала консоли «Перенаправление . ». Но компонент приветствия не отображается. Также не регистрируются ошибки.
Стоит ли использовать Route? Что мне не хватает? Я только начинаю реагировать. Пожалуйста, разместите любые ссылки, которые могут помочь мне понять больше.
2 ответа
То, что происходит в вашем коде, в основном заключается в том, что функция возвращает объект реакции, но не отображает его, поэтому вы видите консоль, но перенаправления не происходит. Если вы хотите, чтобы это работало, используйте if (isLooged), возвращайте значение вне функции «onFinish». Таким образом, он может выполнять рендеринг на Dom и успешно перенаправлять.
Кроме того, вы должны определить маршруты, как указано ниже, если вы хотите, чтобы перенаправление работало. Проверьте приведенный ниже код и таким же образом установите маршруты и поток входа.
Вы должны определить маршруты, как указано ниже, если вы хотите, чтобы Redirect работал
После этого ваше перенаправление должно работать, вы также можете использовать
Кроме того, проверьте этот Программно перемещаться с помощью реагирующего маршрутизатора с использованием разных версий, но сначала вы должны реализовать маршруты, как указано выше.
Дополнительную информацию можно найти на странице https://reactrouter.com/web/guides/quick-start
Вам следует использовать history api от react-router-dom . Вы можете получить к нему доступ с помощью крючка useHistory .
Источник
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.
Источник
How to do a redirect to another route with react-router?
I am trying to do A SIMPLE using react-router ( version ^1.0.3 ) to redirect to another view and I am just getting tired.
all I need is to send the use to ‘/login’ and that’s it.
errors in console:
Uncaught ReferenceError: PropTypes is not defined
file with my routes
7 Answers 7
1) react-router > V5 useHistory hook:
If you have React >= 16.8 and functional components you can use the useHistory hook from react-router.
2) react-router > V4 withRouter HOC:
As @ambar mentioned in the comments, React-router has changed their code base since their V4. Here are the documentations — official, withRouter
3) React-router browserHistory
You can achieve this functionality using react-router BrowserHistory . Code below:
4) Redux connected-react-router
If you have connected your component with redux, and have configured connected-react-router all you have to do is this.props.history.push(«/new/url»); ie, you don’t need withRouter HOC to inject history to the component props.
For the simple answer, you can use Link component from react-router , instead of button . There is ways to change the route in JS, but seems you don’t need that here.
To do it programmatically in 1.0.x, you do like this, inside your clickHandler function:
Источник
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.
This is the .jsx file. Notice how the longest path comes first and get’s more general. For the most general routes use the exact attribute.
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.
Alternatively, you can use withRouter . You can get access to the history object’s properties and the closest ‘s match via the withRouter higher-order component. withRouter will pass updated match , location , and history props to the wrapped component whenever it renders.
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):
For navigate to another page (About page in my case), I installed prop-types . Then I import it in the corresponding component.And I used this.context.router.history.push(‘/about’) .And it gets navigated.
The problem I run into is I have an existing IIS machine. I then deploy a static React app to it. When you use router, the URL that displays is actually virtual, not real. If you hit F5 it goes to IIS, not index.js, and your return will be 404 file not found. How I resolved it was simple. I have a public folder in my react app. In that public folder I created the same folder name as the virtual routing. In this folder, I have an index.html with the following code:
Now what this does is for this session, I’m adding the «routing» path I want it to go. Then inside my App.js I do this (Note . is other code but too much to put here for a demo):
EDIT: changed from localStorage to sessionStorage. sessionStorage goes away when you close the tab or browser and cannot be read by other tabs in your browser.
Источник