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-loadableReact.lazy()并且它有同样的问题。

我试过制作路由组件类

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

使用路径“/”将所有组件渲染到交换机，但仍然是同样的问题。

将 Route 的组件属性更改为渲染。

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

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

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

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

在每次路径更改时路由重新渲染组件，尽管路径为“/”

Answer 1

从开发人员那里找到了直接发生这种情况的原因（信用 Tim Dorr）。该路由每次都重新渲染组件，因为它是一个匿名函数。这在树的下方发生了两次，分别在下面的 App 和 Routes 中（在 Loadable 函数中）。

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

需要是

<Routes userRole={user.Role} />

和

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

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

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

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

Answer 2

碰到这个问题并像这样解决它：

在组件中：

import {useParams} from "react-router-dom";
    
const {userRole: roleFromRoute} = useParams();
const [userRole, setUserRole] = useState(null);


useEffect(()=>{
    setUserRole(roleFromRoute);
},[roleFromRoute]}

在路线中：

<Route path="/generic/:userRole" component={myComponent} />

这会为角色设置一个带有参数的通用路由。

在组件中，useParams 获取更改的参数，并且 useEffect 设置状态以触发渲染以及所需的任何业务逻辑。

},[用户角色]);

Answer 3

只需将“/”放在最后，并将其他路由放在它上面。基本上它匹配第一个可用选项，所以它每次都匹配“/”。

<Switch>
        <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} exact path="/" component={HomePage} />
        <Route key={key} component={NotFoundPage} />
</Switch>

OR

<Switch>
          <Route path="/second" component={SecondPage} />
          <Route exact path="/" component={HomePage} />
          <Route path="*" component={NotFound} />
</Switch>

像这样重新排序，它将开始工作。简单的 ：）