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

在React-Router V4中以编程方式设置路由参数最终显示为“找不到页面”

2 个答案:

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

2）或仅从您的路线中删除路径变量：