在 React-Router V4 中以编程方式设置路由参数以 'Page not found' 结束

Question

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

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

这是我在路由器文件中处理路由的方式（比如 router.js）：

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

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

page not found message

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

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'
});