reactjs - React-Router - 路由更改时路由重新渲染组件

Question

请在标记为重复之前正确阅读此内容，我向你保证我已经阅读并尝试了每个人在 stackoverflow 和 github 上就此问题提出的所有建议。

我的应用中有一条路线呈现如下；

<div>
        <Header compact={this.state.compact} impersonateUser={this.impersonateUser} users={users} organisations={this.props.organisations} user={user} logOut={this.logout} />
        <div className="container">
            {user && <Route path="/" component={() => <Routes userRole={user.Role} />} />}
        </div>
    {this.props.alerts.map((alert) =>
            <AlertContainer key={alert.Id} error={alert.Error} messageTitle={alert.Error ? alert.Message : "Alert"} messageBody={alert.Error ? undefined : alert.Message} />)
        }
    </div>

路由渲染 Routes 渲染一个组件，该组件切换用户角色并根据该角色延迟加载正确的路由组件，该路由组件渲染主页的开关。简化后如下所示。

import * as React from 'react';
import LoadingPage from '../../components/sharedPages/loadingPage/LoadingPage';
import * as Loadable from 'react-loadable';

export interface RoutesProps {
    userRole: string;
}

const Routes = ({ userRole }) => {

var RoleRoutesComponent: any = null;
switch (userRole) {
    case "Admin":
        RoleRoutesComponent = Loadable({
            loader: () => import('./systemAdminRoutes/SystemAdminRoutes'),
            loading: () => <LoadingPage />
        });
        break;
    default:
        break;
}

return (
    <div>
        <RoleRoutesComponent/> 
    </div>
);

}

export default Routes;

然后是路由组件

const SystemAdminRoutes = () => {

var key = "/";

return (
    <Switch>
        <Route key={key} exact path="/" component={HomePage} />
        <Route key={key} exact path="/home" component={HomePage} />
        <Route key={key} path="/second" component={SecondPage} />
        <Route key={key} path="/third" component={ThirdPage} />
        ...
        <Route key={key} component={NotFoundPage} />
    </Switch>
);
}

export default SystemAdminRoutes;

所以问题是每当用户从“/”导航到“/second”等等...应用程序重新呈现Routes，这意味着角色切换逻辑重新运行，用户特定的路线被重新加载和重新呈现，页面上的状态丢失。

我尝试过的事情；

我已经用 react-loadable 和 React.lazy() 试过了，它有同样的问题。

我试过制作路线组件类

为树下的所有路由提供相同的 key

将所有组件渲染到路径为“/”的开关，但问题仍然存在。

更改要渲染的 Route 组件属性。

将主应用程序渲染方法更改为 component={Routes} 并通过 redux 获取 Prop

我在应用程序组件中渲染主要路由组件的方式肯定有问题，但我很困惑，有人能解释一下吗？另请注意，这与 react-router 的开关无关。

编辑:我修改了我的一个旧测试项目来演示这个错误，你可以从 https://github.com/Trackerchum/route-bug-demo 克隆 repo - 一旦 repo 被克隆，只需在根目录和 npm start 中运行 npm install。当 Routes 和 SystemAdminRoutes 被重新渲染/重新挂载时，我已经将它记录到控制台

编辑:我已经在 GitHub 上打开了一个关于这个的问题，可能是错误

Route re-rendering component on every path change, despite path of "/"

Answer 1

直接从开发人员那里找到了发生这种情况的原因(感谢 Tim Dorr)。路由每次都重新渲染组件，因为它是一个匿名函数。这在树下发生了两次，分别在 App 和 Routes(在 Loadable 函数内)中，如下所示。

<Route path="/" component={() => <Routes userRole={user.Role} />} />

需要

<Routes userRole={user.Role} />

和

loader: () => import('./systemAdminRoutes/SystemAdminRoutes')

基本上我的整个方法都需要重新考虑

编辑:我最终通过在路由上使用 render 方法解决了这个问题:

<Route path="/" render={() => <Routes userRole={user.Role} />} />