React中如何将ProtectedRoute路由抽离到单独文件简化app.js管理

步骤1：新建独立受保护路由模块 #

在src/Routes/目录下新建ProtectedRoutes.js文件，写入以下代码：

import React from 'react';
import ProtectedRoute from './ProtectedRoute';
import Dashboard from '../Dashboard/Dashboard';
import Customer from '../Customer/Customer';

// 所有受权限校验的路由统一在此维护
function ProtectedRoutes() {
  return (
    <>
      <ProtectedRoute path="/dashboard"><Dashboard /></ProtectedRoute>
      <ProtectedRoute path="/customer"><Customer/></ProtectedRoute>
    </>
  );
}

export default ProtectedRoutes;

注意：如果你的文件路径和示例不一致，需要调整导入语句的路径匹配你的项目结构

步骤2：修改App.js代码 #

首先在App.js的导入区域新增一行导入刚才创建的模块：

import ProtectedRoutes from './Routes/ProtectedRoutes';

然后替换原来Switch组件内的两行受保护路由代码，修改后的Switch部分如下：

<Switch>
    <Route path="/login"><Login /></Route>
    {/* 抽离后的所有受保护路由 */}
    <ProtectedRoutes />
    <Route exact path="/"><Redirect exact from="/" to="dashboard" /></Route>
    <Route path="*"><Redirect from="/" to="dashboard" /></Route>
</Switch>

修改完成后原有功能完全不受影响，后续新增需要权限校验的路由，直接在ProtectedRoutes.js中添加即可，不需要改动App.js主文件，可维护性大幅提升。

内容的提问来源于stack exchange，提问作者wontone_boys