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

Question

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

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

GetCustomerData 将客户数据作为 JSON 有效负载数组（包括客户 ID）。我们导航到具有相应 ID 的特定客户的 Dashboard 组件。

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

我看过一些教程说要执行以下操作：

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

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

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

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

Answer 1

先设置404路由

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

然后将您的GetCustomerDatadata 存储在状态数组中。目前尚不清楚数据来自何处或如何从您的示例中对其进行操作。如果将数据放入组件状态是一个问题，请创建一个单独的问题。

如果您从 URL 中提取 id，则使用 props 中的 route 参数获取您的客户 id this.props.match.params.customerID

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

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