когда нечего делать, а творческая душа требует реализации и хочется что-то сделать или написать, то я пишу сюда или делаю что-то на этом сайте. Кому интересна web-разработка, wordpress и то что рядом с этим, то заходите на мой сайт и читайте всякое...
Использование истории браузера и функция редиректа в 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 есть несколько методов для навигации. Подробно о них вы можете прочитать в документации.
Вариант 2. withRouter
В react-router-dom есть встроенная возможность с помощь HOC передать историю в компонент для этого мы сделаем следующие:
// Импорт
import { withRouter } from 'react-router-dom'
Для type scripy
import { withRouter, RouteComponentProps } from 'react-router-dom'
type Props = { ...ваши типы } & RouteComponentProps
Далее мы обернём импорт компонента в whitRouter
export default whithRouter(CustomComponent)
Чтобы использовать историю мы внутри компонента получим её из пропсов.
const { match, history } = props
А далее нам доступны методы истории, которые описаны в документации. Во простой пример:
history.push('/singin')
whithRourer и connect из react-redux
Не совсем понятно или красиво как использовать whitRouter и conneсt вместе. Для более красивой записи можно использовать lodash/fp. C лодашем запись импорта будет выглядеть так:
Призываю вас активно делиться своим опытом по программированию. Я могу предоставить возможность рассказать о вашем опыте на моём сайте. Напишите мне лично или оставьте комментарий.
Комментарии
Поддержи Xakplant
Я давно хочу развить видеоверсию, но пока этого не получается из-за нехватки ресурсов. Сейчас я собираю деньги на новый компьютер и микрофон. Поддержи xaklant и ты увидишь полезные видео быстрее.