react-router <Route /> 组件的url参数可以验证吗？

Posted 2023-02-21

【中文标题】react-router <Route /> 组件的url参数可以验证吗？

【英文标题】：Can the url params of the react-router <Route /> component be validated?

【发布时间】：2016-10-23 10:27:25

【问题描述】：

我正在使用 react-router (2.4.1)，并且我有一个通配符 (path="*") 后备路由来显示“未找到”组件。

我的一条路线定义如下：

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

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

【问题讨论】：

我在他们的 github 问题中看到了使用 url-matcher 的建议：github.com/reactjs/react-router/issues/…

目前似乎只有“hacky”的方式来实现这一点。 react-router 开发人员提到，这可能会在不久的将来实现。

【参考方案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>
        )
    

希望有帮助！