React Router路由匹配冲突解决（不改URL，Params传参场景）

这个问题我之前也碰到过，确实是React Router动态路由匹配的常见坑！不用修改URL的前提下，我们可以通过路由匹配规则限制或者参数校验来解决，分React Router的不同版本给你具体方案：

React Router v5 解决方案（推荐正则匹配） #

v5支持在路由path中直接使用正则表达式来限定动态参数的格式，这样就能让/:organizationId只匹配数字ID，不会捕获create这类字符串：

import { Route } from 'react-router-dom';

// 固定路由放在前面，确保优先匹配
<Route path="/organizations/create" exact component={Component1}/>
// 用(\\d+)正则限定organizationId必须是一个或多个数字
<Route path="/organizations/:organizationId(\\d+)" component={Component2}/>

原理说明 #

(\\d+)是正则表达式的写法（注意这里需要双反斜杠转义，因为JS字符串里的反斜杠需要转义），它会匹配一个或多个阿拉伯数字。当访问/organizations/create时，create不符合数字规则，第二个路由就不会触发匹配，只会加载Component1；而访问/organizations/5这类URL时，5符合正则，Component2会正常加载。

如果不想用正则，也可以通过render属性做参数校验：

<Route path="/organizations/:organizationId" render={({ match }) => {
  const orgId = match.params.organizationId;
  // 校验是否为有效数字（避免像"5abc"这类混合字符串被误判）
  if (!isNaN(parseInt(orgId, 10)) && parseInt(orgId, 10).toString() === orgId) {
    return <Component2 />;
  }
  // 不符合则不渲染，或者跳转到404页面
  return null;
}}/>

React Router v6 解决方案（路由守卫组件） #

v6移除了path中的正则支持，不过我们可以通过路由守卫组件来做参数校验，确保只有数字ID才会渲染Component2：

首先定义一个守卫组件：

import { useParams, Navigate } from 'react-router-dom';

function OrganizationGuard({ children }) {
  const { organizationId } = useParams();
  
  // 校验ID是否为纯数字
  const isValidId = organizationId && !isNaN(parseInt(organizationId, 10)) 
    && parseInt(organizationId, 10).toString() === organizationId;

  if (!isValidId) {
    // 不符合规则可以跳转到404，或者返回null不渲染
    return <Navigate to="/404" replace />;
  }
  
  return children;
}

然后在路由中使用：

import { Routes, Route } from 'react-router-dom';

<Routes>
  <Route path="/organizations/create" element={<Component1 />} />
  <Route path="/organizations/:organizationId" element={
    <OrganizationGuard>
      <Component2 />
    </OrganizationGuard>
  } />
</Routes>

这样访问/organizations/create时，守卫组件会判断create不是有效数字ID，不会渲染Component2；只有数字ID的URL才会正常加载Component2。

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