如何在React中使用react-router-dom正确配置路由与重定向规则

问题根因 #

配置失效核心是<Switch>组件的匹配规则限制：<Switch>只会对直接子节点的<Route>/<Redirect>做路径匹配，你用<React.Fragment>包裹权限路由后，<Switch>无法识别到Fragment内部的路由规则，导致所有路由匹配逻辑紊乱，404兜底/重定向自然不会生效。

修复方案 #

第一步：调整路由结构 #

1. 移除Switch外的Dashboard条件渲染逻辑，把Dashboard的路由放到Switch内部统一管理
2. 去掉权限路由外层的<React.Fragment>，将权限判断直接绑定到对应<Route>上，保证Switch的直接子节点都是<Route>或<Redirect>
3. 在Switch最后添加不带path的兜底重定向规则，匹配所有未命中的路由跳转到/

修改后的Main组件已认证分支路由代码如下：

<Switch>
    {/* 根路径及dashboard路由，exact保证只有路径完全匹配时才触发 */}
    <Route exact path="/" component={Dashboard} />
    <Route path="/dashboard" component={Dashboard} />

    {/* 权限路由：权限判断直接绑定到Route，符合条件才渲染对应路由 */}
    {userAdmin && <Route exact path="/users" component={Users} />}
    {userAdmin && <Route path="/users/:id" component={User} />}

    {productAdmin && <Route exact path="/products" component={Products} />}
    {productAdmin && <Route path="/products/:id" component={Product} />}

    {/* 兜底重定向：所有未匹配的路由都跳转到/ */}
    <Redirect to="/" />
</Switch>

第二步：可选最佳实践优化（路由统一抽离） #

如果后续路由越来越多，可以把路由规则抽成配置数组，动态渲染，更易维护：

// 可单独抽为routerConfig.js文件
const routerConfig = [
  {
    path: '/',
    exact: true,
    component: Dashboard,
    auth: true // 只要登录就能访问
  },
  {
    path: '/dashboard',
    component: Dashboard,
    auth: true
  },
  {
    path: '/users',
    exact: true,
    component: Users,
    auth: (user) => user.userAdmin // 需要用户管理员权限
  },
  {
    path: '/users/:id',
    component: User,
    auth: (user) => user.userAdmin
  },
  {
    path: '/products',
    exact: true,
    component: Products,
    auth: (user) => user.productAdmin // 需要商品管理员权限
  },
  {
    path: '/products/:id',
    component: Product,
    auth: (user) => user.productAdmin
  }
]

// Main组件内动态渲染路由
<Switch>
  {routerConfig.map(route => {
    const hasAuth = typeof route.auth === 'function' ? route.auth(currentUser) : route.auth
    return hasAuth ? <Route key={route.path} {...route} /> : null
  })}
  <Redirect to="/" />
</Switch>

额外优化：你当前未认证的逻辑建议也用路由实现，避免手动操作history的副作用：

// Main组件最外层先判断认证状态
if (!isAuthenticated) {
  return <Redirect to="/login" />
}
// 后续再写已认证的路由逻辑

版本适配说明 #

上述代码适配react-router-dom v5版本，如果是v6版本需要调整语法：Switch替换为Routes，component属性替换为element，Redirect替换为<Navigate to="/" replace />即可。

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