在 React-Router V4 中以编程方式设置路由参数最终导致'Page not found'

Question

我正在尝试从组件中的函数以编程方式设置路由参数，如下所示：

this.props.history.push({
    pathname: '/SupportSectionReports',
    search: '?reportType=0'
    });

以下是我如何处理路由器文件中的路由（例如路由器.js）：

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

这就是我在路由器文件中添加路由的方式， 所以基本上，我希望它在路径为"/SupportSectionReports？reportType=0"时加载我的主页组件，但我得到的是这条消息，您可以从下图中看到它（并且主页组件最终不会加载）：

页面未找到消息

我错过了什么？我是否以错误的方式设置了路由参数？正确的方法是什么？

Answer 1

路由不匹配，因为规则包含路径变量，但仅提供搜索查询：

<Route path="/SupportSectionReports/:reportType" component={Home} />

1） 您需要为路由器提供路径变量：

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

2）或者只是从路由中删除路径变量：

<Route path="/SupportSectionReports" component={Home} /> 

在 Home 组件中，您可以从路由器搜索中获取查询参数。

或提供路径变量

Answer 2

如果在路由路径中使用列表示法，则在推送时应仅传递该命名参数的值：

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