如何使用react-router验证url参数？

Question

我有一个网站，允许他们使用/widgets/:id形式的网址。 我的窗口小部件不超过50个，因此/widgets/51不是有效的网址。 id大于50时如何呈现错误页面？

我应该在我的Widget组件中验证id的值吗？ 还是应该在路线级别进行验证？ 另外，我希望显示错误页面的行为不会更改URL。 也就是说，如果用户导航到/widgets/51我想显示一个错误页面，但是我希望浏览器中显示的URL继续读取/widgets/51 。

提前谢谢了！

Answer 1

如果您希望处理错误消息时URL不变，那么您应该具有测试Widget组件中的参数的逻辑。 您应该按照以下步骤进行操作

render() {
    if(this.props.match.params.id > 50) {
        return <ErrorView/>
    }else {
        return <WidgetView/>
    }
}