使用React Router与正则表达式创建指向同一组件的自定义动态路由时遇到问题，求排查

嘿，我来帮你梳理下你遇到的问题～你的思路是对的，想用正则匹配/car=xxx和/bike=xxx这类URL并指向同一个组件，但在React Router（看你代码用的是v5的Switch和component属性）里，有几个细节没处理到位，导致路由没正常工作：

1. 正则最好限定路径结尾（避免误匹配） #

你写的正则/\/(car|bike)=\w+/确实能匹配/car=honda这类路径，但如果用户不小心输入了/car=honda/abc这种带后缀的URL，它也会被匹配到。要是想严格对应你想要的URL格式，记得给正则加上$来标记路径结尾：

<Route path={/\/(car|bike)=\w+$/} component={Info}/>

这样就能确保只有完全符合/car=xxx或/bike=xxx格式的URL才会触发这个路由。

2. 检查自定义ProtectedLogin路由的实现 #

你的ProtectedLogin是自定义的保护路由，这玩意儿很容易踩坑——要是它内部没正确传递路由的path属性或者没按照React Router的规则处理匹配逻辑，可能会意外拦截后面的正则路由。给你个标准的保护路由写法参考下：

const ProtectedLogin = ({ component: Component, ...rest }) => {
  const isAuthenticated = /* 这里写你的鉴权判断逻辑 */;
  return (
    <Route
      {...rest}
      render={(props) =>
        isAuthenticated ? <Component {...props} /> : <Redirect to="/login" />
      }
    />
  );
};

要是你的ProtectedLogin没像这样把rest（包含path）传递给内部的Route，就可能导致它乱匹配，影响后面的正则路由。

3. 先单独验证正则的准确性 #

你可以先在浏览器控制台里测试下你的正则能不能正确匹配目标URL：

• 输入/\/(car|bike)=\w+/.test('/car=honda')，回车后应该返回true
• 输入/\/(car|bike)=\w+/.test('/bike=yamaha')，同样应该返回true
  如果返回false，那就是正则写法有问题——比如\w+只能匹配字母、数字和下划线，要是你的车型名称有连字符或者其他特殊字符，得改成[\w-]+这类更宽松的匹配规则。

4. 路由顺序别搞反（Switch的特性） #

Switch是从上到下匹配第一个符合条件的路由，你现在的顺序是对的：根路径/、/auth，最后才是正则路由，不会出现前面的路由抢匹配的情况。但要是以后加新路由，记得把更具体的路由放在前面，宽泛的放在后面。

更简单的替代方案（不用正则） #

其实如果你只是想让这两类URL指向同一个组件，完全不用写正则，直接加两个Route指向同一个Info组件就行，写法更直观：

<Router> 
  <Switch> 
    <Route exact path='/' component={Home}/> 
    <ProtectedLogin path='/auth' component={Auth}/> 
    <Route path="/car=:model" component={Info}/>
    <Route path="/bike=:model" component={Info}/>
  </Switch> 
</Router>

这里虽然定义了:model参数，但你完全可以忽略它，自己用正则提取URL内容，效果和你想要的一样，还不用折腾正则的细节～

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