React Router@4路由配置问题：仅允许特定Query参数的路径匹配

我的应用包含以下路径：

domain_url/mtr/1234?type=c
domain_url/mtr/1234?type=sm
domain_url/mtr/1234?type=smd

原本的路由配置可以正常匹配所有上述路径：

<Route path='/mtr/:id' component={Component} />

现在需要仅允许匹配 domain_url/mtr/1234?type=c，暂不开放另外两个路径。我尝试了以下错误的路由配置：

<Route path='/mtr/:id?type=c' component={Component} />

结果出现错误提示：No routes matched location "/mtr/1234?type=c"。使用的是react-router@4版本，求可行的解决方法。

react-router@4的路由path属性不会匹配URL中的查询参数，所以无法直接通过在path中写入?type=c来实现过滤需求。可以通过以下两种方式解决：

方式1：组件内部校验查询参数 #

保留基础的路由配置，在目标组件内部获取并校验查询参数：

// 函数组件写法（react-router@4需确保安装react-router-dom@4）
import { Redirect } from 'react-router-dom';

function Component(props) {
  const searchParams = new URLSearchParams(props.location.search);
  const type = searchParams.get('type');

  // 校验type参数，不符合则跳转或提示
  if (type !== 'c') {
    return <Redirect to="/404" />;
    // 也可以返回无权限提示：return <div>该路径暂未开放</div>;
  }

  // 符合条件时渲染正常内容
  return <div>组件正常内容</div>;
}

// 路由配置
<Route path='/mtr/:id' component={Component} />

方式2：路由层面通过render属性前置校验 #

在路由配置中使用render函数，先判断查询参数再决定是否渲染组件：

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

<Route 
  path='/mtr/:id' 
  render={(props) => {
    const searchParams = new URLSearchParams(props.location.search);
    const type = searchParams.get('type');
    
    // 仅当type为c时渲染组件
    return type === 'c' ? <Component {...props} /> : <Redirect to="/404" />;
  }} 
/>

注意事项 #

react-router@4中没有element属性，你之前的写法属于v6的语法，v4正确的路由组件传入方式是使用component或render属性，这点需要修正。

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