React Router v4 深层嵌套路由能否通过重复路由配置简化？

原有实现的问题 #

• 重复定义相同配置的Route属于可运行但冗余的实现，没有功能问题，但后续修改权限、渲染逻辑、路由规则时需要同时修改多个位置，容易出现漏改导致的线上问题
• 相同的路径前缀重复书写，不符合DRY（Don't Repeat Yourself）编码原则

优化方案 #

方案1：路径数组直接合并重复Route（改动最小，见效最快） #

React Router v4及以上版本的path属性原生支持传入路径数组，多个路径匹配相同规则时无需重复定义Route组件，优化后的ProfileCreationPanel代码如下：

const ProfileCreationPanel = () => {
    return (
        <ProtectedRoute
            exact
            AUTHORIZED_ROLES={[USER_ROLES.DELIVERY]}
            // 传入路径数组即可同时匹配两个路由
            path={[profileCreationPath.path.creation, profileCreationPath.path.editClients]}
            render={props => <Content {...props} />}
        />
    )
};

该方案和原有实现逻辑完全一致，仅需修改3行代码即可消除冗余。

方案2：嵌套路由重构（适合后续有扩展需求的场景） #

如果后续创建档案流程还会新增更多子步骤路由，可以用嵌套路由进一步收敛公共配置，避免重复写路径前缀和权限规则：

1. 父路由仅匹配/creation前缀，做统一的权限校验，渲染公共的Content外壳
2. 子路由放在Content内部，仅需写后缀匹配规则，无需重复定义权限
   优化后的核心代码如下：

// 外层父路由
const ProfileCreationPanel = () => {
    return (
        <ProtectedRoute
            // 父路由不用加exact，才能匹配子路由
            AUTHORIZED_ROLES={[USER_ROLES.DELIVERY]}
            path={profileCreationPath.path.creation}
            render={props => <Content {...props} />}
        />
    )
};

// Content内部嵌入子路由Switch
const Content = (props) => {
  return (
    <div className="creation-wrapper">
      {/* 其他公共UI */}
      <Switch>
        <ProtectedRoute
          exact
          path={profileCreationPath.path.creation}
          component={ProfileInformationsContainer}
        />
        <ProtectedRoute
          exact
          path={profileCreationPath.path.editClients}
          render={() => "second component"}
        />
        {/* 后续新增子路由只需要在这里加即可，无需重复配置权限 */}
      </Switch>
    </div>
  )
}

该方案结构更清晰，扩展性更强，适合中大型项目的长流程路由管理。

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