Использование истории браузера и функция редиректа в ReactJS c react-router-dom

Йо-йо! Пару раз нужно было перенаправить пользователя на новый url в reactjs с помощью функции и вызвать render компонента в router’е. Проблема в том, что компонент не может использоваться как функция, конечно же, если только не с помощью «танцев с бубном».

Недавно (12-13.07.2019) я участвовал к конкурсе цифровой прорыв (в котором с треском проиграл, однако кому интересно вот ссылка на результат проекта) и мне вновь понадобилось перенаправить страницу с помощью функции. Думаю, что многим будет полезно знать как это делать.

Настройка

Для того чтобы можно было использовать историю в роутере нам понадобиться сделать установить пакет «history» из npm и импортировать <Router/> из «react-router-dom«.

npm i history

import { createBrowserHistory } from "history";
import { Router, Route, Switch } from 'react-router-dom';
// Будьте внимательны импортировать нужно именно Router, а не BrowserRouter

Создание новой «истории»

После всех импортов создаём новый экземпляр истории

const customHistory = createBrowserHistory();

И передаём её в роутер

....
<Router history={customHistory}>
.....

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

Использование перенаправления функцией

Этот абзац о той теме которую я озвучил в заголовке — перенаправление страниц функцией в react. Чтобы перенаправить страницу мы должны использовать метод push.

history.push('/home');

// Если применять к нашему примеру то нужно написать так:
customHistory.push('/home');

У объекта history есть несколько методов для навигации. Подробно о них вы можете прочитать в документации.

P.S.

Призываю вас активно делиться своим опытом по программированию. Я могу предоставить возможность рассказать о вашем опыте на моём сайте. Напишите мне лично или оставьте комментарий.

Комментарии