React Router 4 + Разделение кода | Компоненты перемонтируются

Question

У меня есть следующий код:

import React from 'react'
import Loadable from 'react-loadable'
import { Route } from 'react-router-dom'

class App extends React.Component {
    state = {
        kappa: false
    }

    componentDidMount() {
        setTimeout(() => {
            setState({ kappa: true })
        }, 1000)
    }

    render() {
        return (
            <div className="app">
                <Route exact path="/:locale/" component={Loadable({
                    loader: () => import('../views/IndexPage/index.jsx'),
                    loading: () => "loading"
                })} />
                <Route exact path="/:locale/registration" component={Loadable({
                    loader: () => import('../views/Registration/index.jsx'),
                    loading: () => "loading"
                })} />

                {this.state.kappa && <p>Hey, Kappa-Kappa, hey, Kappa-Kappa, hey!</p>}
            </div>
        )
    }
}

Когда состояние обновляется (kappa становится правдой и p появляется), компонент на активном маршруте (независимо от того, что это - IndexPage или же Registration) перемонтирует. Если я импортирую компонент вручную в приложение и передам его Route без разделения кода компоненты на маршрутах не перемонтируются (это так очевидно).

Я также попробовал динамический импорт webpack, например:

<Route path="/some-path" component={props => <AsyncView {...props} component="ComponentFolderName" />

где import(`/path/to/${this.props.component}/index.jsx`) работает в componentDidMount и засыпает AsyncViewи она ведет себя аналогично Loadable ситуация.

Я полагаю, проблема в том, что component за Route это анонимная функция

Вопрос: как избежать перемонтирования компонентов маршрута?

Answer 1

Что ж, такое поведение является нормальным и задокументировано в документации по React Router 4:

Когда вы используете компонент (вместо render или children, ниже), маршрутизатор использует React.createElement для создания нового элемента React из данного компонента. Это означает, что если вы предоставите встроенную функцию для компонента prop, вы будете создавать новый компонент при каждом рендеринге. Это приводит к размонтированию существующего компонента и монтированию нового компонента вместо простого обновления существующего компонента. При использовании встроенной функции для встроенного рендеринга используйте рендер или дочернюю опору (ниже).

render отлично работает как с React Loader, так и с разделением кода в веб-пакете.