Почему в ReactJS не происходит рендеринг компонента при history.push?

Question

[Ken Jee]

Почему не происходит рендеринг компонента Login после того, как был запушин новый URL /user/login при помощи history.push? А вот при явном запросе URL /user/login - компонент Login рендериться как нужно.

import './../bootstrap'

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Route, Switch } from 'react-router-dom'
import {withRouter} from "react-router-dom"

import Header from './Header'

import Login from './Login'

import Footer from './Footer'

class App extends Component {

    componentWillMount() {

        if ( ! this.props.auth ) {

            this.props.history.push( '/user/login' )

        }

    }

    render() {

        return (

            <div>
                <Header />
                <Switch>
                    <Route path='/user/login' component={Login}/>
                </Switch>
                <Footer />
            </div>

        )

    }

}

const mapStateToProps = state => {

    return {

        auth: state.auth

    }

}

export default connect( mapStateToProps )( withRouter( App ) )

Answer 1

[Ken Jee]

Все заработало после того как я поменял экспорт App

Вариант, который был и НЕ работал:

export default connect( mapStateToProps )( withRouter( App ) )

Вариант, который заставил всё работать так, как нужно:

export default withRouter( connect( mapStateToProps )( App ) )

Видимо суть заключается в том, что withRouter это функция высшего порядка и в данном случае ее надо применять уже к результату функции connect.

Comments

[Павло Пономаренко]

connect - тоже функция высшего порядка

хорошо, что все решилось. решение, правда, в очередной раз доказывает, что библиотеки эти - не очень

[Антон Спирин]

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

Павло Пономаренко, это лишь говорит о том, что Dev Fun либо совсем не читал документацию, либо делал это не внимательно. А там все есть.

Тут более детально.

[Павло Пономаренко]

Антон Спирин, а если я захочу соединить две библиотеки такие, каждая из которых хочет быть первой?

[Антон Спирин]

Павло Пономаренко,

каждая из которых хочет быть первой

ни одна из этих библиотек не "хочет быть первой". Вы вижу тоже не любите документации читать. Дело в том, что когда вы пишите connect(withRouter()); компонент возвращаемый вызовом connect реализует метод shouldComponentUpdate, а это блокирует цепочку вызовов render инициированную Router, так как connect ничего не знает про history и только компонент Router подписан на ее изменения. Когда же вы пишите withRouter(connect()); то withRouter возвращает ваш код обернутый в компонент Route, который не реализует shouldComponentUpdate и не прерывает цепочку render. Route передает в connect match и location которые изменяются при вызове методов history и connect каждый раз получая новые props, инициирует рендер дочернего компонента.
Надеюсь теперь причину понимаете.

Answer 2

[Павло Пономаренко]

Я так понимаю, что стейт у вас не обновляется, по сути. Попробуйте сделать специальную обертку, которая будет не только history изменять, но и еще дополнительный state в корневом элементе. Как-то так:

this.setState({ currentUrl: '/user/login' })

Comments

[Ken Jee]

Тут дело не в стейте, а в Роутинге. По history.push осуществляется смена URL, и на этом URL не рендерится компонент. А вот например если заменить history.push на location.replace, то осуществляется явный переход на новый URL и компонент рендериться.

[Павло Пономаренко]

Dev Fun, если вы знаете в чем проблема и как ее правильно решать - зачем создали вопрос?

Если применить replace, то будет заново вся страничка рендериться. Когда меняется URL через history.push - Реакт никак не узнает об этом, а потому не запускает перерендер. Вам необходимо сообщить об этом библиотеке и самый простой способ - через изменение стейта.

[Ken Jee]

Павло Пономаренко, хм... Попробую. Спасибо. Я думал стейт как-то обособлен от этого всего.

[Павло Пономаренко]

Dev Fun, ну стейт - это один из способов сообщить Реакту инфу о том, что что-то важное поменяться и необходимо запустить ререндер. forceUpdate еще, к примеру, может помочь, но он не react-way. Может еще что-то во встроенном роутере или редаксе есть, но они кривые и потому я ими давно не пользовался

[Антон Спирин]

Павло Пономаренко,

Когда меняется URL через history.push - Реакт никак не узнает об этом

А вот и неправда. Это был бы очень странный роутер, если бы он не был подписан на изменения history.
https://codesandbox.io/s/7j6z4y4vq

[Павло Пономаренко]

Антон Спирин, может зависит от чего-то? Если автору мой совет поможет, значит я был прав. У вас в примере и правда работает корректно.

[Павло Пономаренко]

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

[Антон Спирин]

Павло Пономаренко, тут много вариантов может быть. Не известно даже, какая версия роутера, какой именно модуль используется(StaticRouter, BrowserRouter, Router) и точно ли не существует this.props.auth на момент проверки.

[Ken Jee]

Всем спасибо за участие. Проблема решилась неожиданно просто. Решение описал отдельным постом.

Answer 3

[Максим]

Как уже сказали, про изменении истории при history.push реакт ничего не знает. Но вы можете научить его реагировать на это (так же как это делает реакт-роутер, по сути) - посмотрите раздел в статье Обучаем Route реагировать на изменение URL-адреса