在 react-router 中设置参数类型

Posted 2023-02-19

【中文标题】在 react-router 中设置参数类型

【英文标题】：Set type of params in react-router

【发布时间】：2017-07-25 08:33:18

【问题描述】：

如何传递URL匹配类型的参数？

例如，我有/profile/:id，它允许我去/profile/1。

但问题是我也可以通过/profile/1qwr/ 去，但我什么也得不到。

如何检查URL参数的类型并显示错误或其他？

【问题讨论】：

如何获取个人资料？通过向数据库发出某种带有 id 的请求？

【参考方案1】：

A.您不能对路由的参数设置类型检查。

B.如果你想显示一些错误 - 在你的渲染方法中通过获取像这样的参数来处理它this.props.params.id。但即使在这里你也无法区分类型，因为你总是会得到字符串。

您可以尝试使用parseInt 并检查转换是否成功，然后确定如何操作。

【参考方案2】：

我刚刚想到的快速破解：

在componentWillMount() 中（或在纯组件的渲染函数中，但这可能是一个更糟糕的主意），您可以引用使用this.props.match.url 传递的URL。

您可以对字符串进行切片以消除 /，然后将 url 传递给正则表达式或 parseInt() 之类的函数以进行准类型检查。

然后，您需要做的就是从 react-router 中拉入 Redirect component 并有条件地关闭它（如果它不是您允许的类型，可能会将其发送到您的 404 页面。）。

【讨论】：

componentWillMount 将被弃用。 reactjs.org/blog/2018/03/27/update-on-async-rendering.html

【参考方案3】：

其他答案已过时。

在我看来，最好的解决方案是通过编写一个简单的正则表达式在id 参数上设置一个type。

如果您希望 id 仅接受整数，您将执行以下操作：

/profile/:id(\\d+)

/* the `(\\d+)` is a regular expression that will only accept integers */

---

在path-to-regex 文档中了解更多信息。 path-to-regex是react-router内部使用的，所以不需要安装任何东西。

【讨论】：

这是正确的。作为附录，如果您的参数是可选的，您可以像这样使用它：/profile/:id(\\d+)?'/profile/1' = id: 1 '/profile/two' = '/profile' =