Использование истории браузера и функция редиректа в 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 лодашем запись импорта будет выглядеть так:

import React from 'react'
import fp from 'lodash/fp'
import { connect } from 'react-redux'
import { withRouter }

class CustomComponent extends React.Component{
  .....
}

const mapStateToProps = { ... }
const matDispantToProps = { ... }

export default fp.flow(
  withRouter,
  connect(mapStateToProps, matDispantToProps)
)(Approval)

P.S.

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

Комментарии