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

Question

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

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

GetCustomerData将客户数据作为包含客户ID的JSON负载数组获取。我们使用相应的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')
);

- blankface

Answer 1

首先设置一个404路由

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

接下来将你的GetCustomerData数据存储在状态中的数组中。从您的示例中无法确定数据来自何处或如何操作它。如果将数据转换为组件状态存在问题，请提出单独的问题。

如果您正在从URL中获取id，则使用props中的路由参数获取客户ID：this.props.match.params.customerID

一旦您获得了数据和id，那么就可以在render方法中运行检查。

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

- Josh Pittman

---

数据有效载荷（来自API调用）存储在GetCustomerData中。由于if检查是在App内完成的，您认为将有效载荷从GetCustomerData发送到App，然后进行检查是一个好主意吗？ - blankface

这取决于您想要从哪里重定向。我会在仪表板组件内执行此操作，因为该组件是唯一一个URL中包含客户ID的位置。 - Josh Pittman

你能详细说明一下吗？我正在更新原始帖子，以便让你更好地了解App组件的位置。 - blankface

也许提供你的文件结构截图会更有帮助，通常在代码编辑器左侧的文件树。 - Josh Pittman

具体来说，您应该有一个包含“Dashboard”组件的文件。这是您在仪表板路由中引用的组件。然后，您应该有一个“NotFound”组件的文件。这是您在404路由中引用的组件。然后，您有一个包含所有路由的路由器文件（我认为您称其为主文件）。我建议您将我编写的if-then块放在Dashboard组件的render方法中，因为那是您想要重定向的位置。 - Josh Pittman

复杂的问题在于将您的JSON有效载荷作为属性传递到仪表板组件中。由于我们不知道您的数据或其来源，因此建议您针对此问题提出新问题。我的答案应该澄清您所问的问题，即如何使用您的设置呈现404路由。您可以在要重定向的组件中弹出重定向组件。 - Josh Pittman