React Router 4 + Разделение кода | Перемонтирование компонентов

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

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 без разделения кода, компоненты на маршрутах не перемонтируются (это так очевидно).

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

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

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

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

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