react路由器组件的url参数是否可以验证？

Question

我正在使用react路由器（2.4.1），我有一个通配符（path=“*”）回退路由来显示“未找到”组件。

我的其中一条路线定义如下：

<Route path="/campaigns/:category" component={CampaignsPage} />

我可以以任何方式验证类别路由参数，以检查该类别是否存在于我的类别列表中？如果没有，我希望路由器下降到通配符，以便显示未找到组件

Answer 1

也许您可以在“活动”组件中验证收到的参数？大致如下：

class CampaignsPage extends Component {
    render() {
        const validCampaignCats = [...]
        const receivedCampaignCat = this.props.params.category

        const renderChild = (actualCat, validCats) => {
            if (!validCats.includes(actualCat)) {
                return <YourErrorPage/>
            }
            return this.props.children
        }

        return (
            <div>
                <Header/>
                { renderChild(receivedCampaignCat, validCampaignCats) }
                <Footer/>
            </div>
        )
    }
}

希望有帮助！