React-Router V4编程式设置路由参数触发404页面问题

嘿，你遇到的问题其实是路由配置和跳转方式不匹配导致的，咱们一步步理清楚：

你现在跳转时用的是URL查询参数（?reportType=0），但路由配置里写的是动态路由参数（/SupportSectionReports/:reportType）——这俩是完全不同的参数传递方式，所以Switch找不到对应的路由规则，就会触发页面未找到的提示。

下面给你两种正确的实现方案，你可以根据需求选择：

方案一：保留查询参数（?reportType=0）的实现方式 #

如果想继续用带问号的查询参数跳转，那路由配置不需要写动态参数，只需要匹配基础路径即可：

<Switch>
  <Route exact path="/" component={Login} />
  <Route path="/home" component={Home} />
  <Route path="/SupportSectionReports" component={Home} />
</Switch>

之后在Home组件里，你可以这样解析查询参数：

// 解析URL中的查询参数
const searchParams = new URLSearchParams(this.props.location.search);
const reportType = searchParams.get('reportType'); // 这里就能拿到参数值0啦

方案二：适配动态路由参数的实现方式 #

如果想保留路由里的/SupportSectionReports/:reportType配置，那跳转时就要把参数直接放到路径里，而不是用search字段：

this.props.history.push({ pathname: `/SupportSectionReports/0` });

然后在Home组件里，通过this.props.match.params.reportType就能获取到参数值0。

另外给你个小建议：可以给Switch加一个兜底的404路由，这样能更直观地判断是否匹配到了路由规则：

<Switch>
  <Route exact path="/" component={Login} />
  <Route path="/home" component={Home} />
  <Route path="/SupportSectionReports/:reportType" component={Home} />
  <Route component={NotFound} /> {/* 这里放你的自定义404组件 */}
</Switch>

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