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

Posted 2023-02-22

【中文标题】在 React-Router V4 中以编程方式设置路由参数最终会出现“找不到页面”

【英文标题】：Programatically setting route params in React-Router V4 ends up in 'Page not found'

【发布时间】：2019-06-04 01:22:58

【问题描述】：

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

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

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

【参考方案1】：

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

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

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

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

2) 或者只是从您的路线中删除路径变量：

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

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

或者提供路径变量

【讨论】：

tnx 一堆，你能给我提供一个关于如何在 Home 组件中获取该查询参数的示例（比如我从我的路线中删除了路径并提供了搜索查询）？我在考虑this.props.match.params，但事实并非如此，对吧？

@ForoughFallah 尝试安慰this.props.location.search

【参考方案2】：

如果您在路由路径中使用列符号，那么您应该在推送时只传递该命名参数的值：

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