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

【问题标题】：Can the url params of the react-router <Route /> component be validated?react-router <Route /> 组件的url参数可以验证吗？
【发布时间】：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 开发人员提到，这可能会在不久的将来实现。

标签： reactjs 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>
        )
    }
}

希望有帮助！

【讨论】：