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

问题描述 投票:4回答:3

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

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

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

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

使用typescript和react-router。

javascript reactjs redux react-router
3个回答
3
投票

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

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

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


1
投票

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

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

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

/profile/:id(\\d+)

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

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


0
投票

快速破解我只是想到:

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

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

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

© www.soinside.com 2019 - 2024. All rights reserved.