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）重新装入。如果我在App中手动导入组件并将其传递给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 docs中记录：

当您使用组件（而不是下面的render或children）时，路由器使用React.createElement从给定组件创建新的React元素。这意味着如果为组件prop提供内联函数，则每次渲染都会创建一个新组件。这导致现有组件卸载和新组件安装，而不是仅更新现有组件。使用内联函数进行内联渲染时，请使用render或children prop（下面）。

render可以在React Loader和webpack的代码拆分中正常工作。

React Router 4 + Code splitting |组件重新安装

1 个答案: