如何使用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/>
    }
}