Question

在React Router 4中我可以定义

<Route path="/calendar/:view/:year?/:month?/:day?" component={Calendar} />

将道具从URL传递到我的日历组件。

在Calendar组件中，我想以编程方式设置URL参数。文档显示了如何使用history.push()执行此操作，但这需要您自己格式化网址，如history.push(``${view}/${year}/${month}/${day}``)。但是我希望更新URL而不与路由结构相关联，理想情况是类似history.push({ view: 'month', year: '2018' })。

这可能吗？对我来说，React Router有助于将URL拆分为params，但是没有提供设置这些params的好机制，这似乎很奇怪？

Answer 1

我不确定你想要的是否可以实现，因为如果你将params传递给react-router-dom，params会转到URL，但如果你将params与URL结构分离，将如何反应-router知道如何更改URL？相同的URL可以匹配多个路径，具有多个参数结构（和嵌套路由）。

Answer 2

我设法使用React Router使用的path-to-regexp包来实现它：

this.props.history.push(pathToRegexp.compile(this.props.match.path)({ view: 'month', year: '2018' ));

Answer 3

我通过使用match.path和generatePath做到这一点。这是一个示例：

this.props.history.push({
    pathname: generatePath(this.props.match.path, {orderId: "latest", orderItemId: "latest"})
});

您可以在https://reacttraining.com/react-router/core/api/generatePath和https://reacttraining.com/react-router/core/api/match这里阅读。

那是迄今为止我找到的最干净的解决方案，用于防止路由组件对以后在路径结构中的分配位置了解得更多。也许它符合您（或其他人）的需求。

Answer 4

我建议您不要使用history.push()，而是使用history.replace()。

使用replace不会影响历史记录，以防用户希望在浏览器中向后浏览。

this.props.history.replace({
    pathname: generatePath(this.props.match.path, {orderId: "latest", orderItemId: "latest"})
});

在React Router v4中以编程方式设置params

4 个答案: