reactjs - 使用 React Router v4 有条件地渲染 404 路由

Question

在我最父组件App中，我实现了这样的路线:

<GetCustomerData />
<Switch>
    <Route path="/dashboard/:customerID" component={Dashboard} />
</Switch>

GetCustomerData 获取 JSON 负载数组形式的客户数据(包括客户 ID)。我们导航到特定客户及其相应 ID 的 Dashboard 组件。

我想设置一个路由，如果 GetCustomerData 中的 JSON 负载中不存在我们在 URL 中传递的客户 ID，该路由基本上会引发 404 组件。

我看过一些教程，说要做这样的事情:

 <Route path="*" component={NotFound} />

但这并没有真正检查网址中的 customerID 参数。我该如何实现这个？

编辑:在我的主要组件中，我以这种方式配置了浏览器路由:

ReactDOM.render(
    <BrowserRouter>
        <div className="main">
            <App />
        </div>
    </BrowserRouter>
    ,
    document.getElementById('react-app')
);

Answer 1

首先设置404路由

<Route path="/error" component={NotFound} />

然后将您的 GetCustomerData 数据存储在状态数组中。目前尚不清楚数据来自哪里，也不清楚如何从示例中操作它。如果将数据放入组件状态是一个问题，请创建一个单独的问题。

如果您要从 URL 中提取 ID，请使用 props 中的路由参数来获取您的客户 ID this.props.match.params.customerID

一旦你有了数据和 ID，你就可以在你的渲染方法中运行检查。

if (this.state.data.includes(this.props.match.params.customerID)){
 return <whatYouExpectedToReturn/>
}else{
 return <Redirect to='/error'/>;
}