在react-route r中设置params的类型

Posted 2021-05-05

如何在URL匹配类型中传递params？

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

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

如何检查类型？并显示错误或其他？

使用typescript和react-router。

答案

答：您无法在路线的参数上设置类型检查。

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

您可以尝试使用parseInt并检查转换是否成功，然后确定该怎么做。

另一答案

其他提到的答案之一是效率低下而另一个是过时的。

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

如果你想让id只接受整数，你可以这样做：

/profile/:id(\d+)

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

---

在path-to-regex文档中阅读更多相关信息。 path-to-regex在内部由react-router使用，因此无需安装任何东西。

另一答案

快速破解我只是想到：

在componentWillMount()（或纯组件的渲染功能，但这可能是一个更糟糕的想法），您可以引用与this.props.match.url传递的URL。

您可以切割字符串以消除/，然后将url传递给regex或像parseInt()这样的函数进行准类型检查。

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