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>

route renderingRoutes呈现打开用户角色的组件，并基于该角色惰性加载正确的Routes组件，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;

因此，问题是每当用户从/导航到/秒等...应用程序重新渲染路由，这意味着角色切换逻辑被重新运行，用户特定的路由被重新加载和重新渲染，页面上的状态丢失。

我尝试过的事情；

我在应用程序组件中呈现主路由组件的方式一定有问题，但我很困惑，有人能解释一下吗？还要注意，这与react路由器的交换机无关。

编辑：我修改了一个旧的测试项目来演示这个bug，你可以从中克隆repohttps://github.com/Trackerchum/route-bug-demo -一旦repo被克隆，只需在root dir中运行npm安装，然后npm启动。当重新呈现/重新装载路由和SystemAdminRoutes时，我将其记录到控制台

编辑：我在GitHub上发布了一个关于这个的问题，可能是bug

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

Answer 1

只需将“/”放在末尾，并将其他路线放在其上方。基本上，它匹配第一个可用选项，因此每次都匹配“/”。

<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>

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

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设置一个状态以触发渲染和所需的任何业务逻辑。

}，[userRole]）；

Answer 3

直接从一个开发者那里找到了发生这种情况的原因（归功于Tim Dorr）。路由每次都重新呈现组件，因为它是匿名函数。这在树下发生两次，分别是应用程序内和路由（在可加载函数内），如下所示。

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

需要

<Routes userRole={user.Role} />

和

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

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

编辑：我最终通过使用route上的render方法修复了此问题：

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