如何使用react-router验证url params？

Question

我有一个网站，允许他们的网址为/widgets/:id。我的小部件不超过50个，因此/widgets/51不是有效的网址。当id大于50时，如何渲染错误页面？

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

非常感谢提前！

Answer 1

如果您希望在处理错误消息时URL没有改变，那么您应该具有测试Widget组件中的参数的逻辑。你应该这样做

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