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} />

但这并不能真正检查网址中的customerID参数。我该如何实现呢？

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

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

Answer 1

首先设置404路线

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

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

如果您从网址中提取ID，请使用道具中的路线参数获取您的客户ID this.props.match.params.customerID

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

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

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

1 个答案: