ReactJS:处理无效的动态链接并呈现404错误消息

应用程序链接：

类似问题如下：

我正在获取一个API调用，并仅将数据中的名称呈现给

Shop

组件。然后通过提供id（即

/shop/：itemId

）提供指向这些名称的动态链接

在这里，当

itemId

错误时，或者如果用户键入除有效id以外的任何内容，我想处理“page not found（404）error”

<Router>
  <div className="App">
    <Nav />
    <Switch>
      <Route path="/" exact component={Main} />
      <Route path="/about" exact component={About} />
      <Route path="/contact" exact component={Contact} />
      <Route path="/shop" exact component={Shop}>
        <Route path="/shop/:itemId" exact component={ItemDetails} />
        <Route path="*" exact component={Error404} />
      </Route>
      <Route component={Error404} />
    </Switch>
  </div>
</Router>

在上面的代码片段中，除了下面的部分之外，其他一切都很好

<Route path="/shop" exact component={Shop}>
   <Route path="/shop/:itemId" exact component={ItemDetails} />
   <Route path="*" exact component={Error404} />
</Route>

在这里，当我转到路径

/shop

或甚至

/shop/有效id或无效id

时，它仅呈现

错误404

组件。我如何解决这个问题

---

注意：如果我删除了

exact

，那么对于

/contac

或

/abou

这样的路径，它可以很好地工作，仅当您拼错了路径名时，它才会呈现

Error404

组件。但如果我尝试

/contact/asdasdadd

，它会呈现

contact

组件。有没有其他方法可以解决这个问题？

路由器的问题是，除非您有交换机，否则它会将所有作为匹配路由前缀的路由呈现出来。在您的情况下，

“/shop/:itemId”

将同时匹配

“/shop/:itemId”

和

*

，因此会呈现错误组件

同样从v4或路由器，您需要在组件本身中有嵌套路由。您还需要决定itemId在ItemDetails组件中是否有效，如果无效，则重定向到404页面

<Router>
  <div className="App">
    <Nav />
    <Switch>
      <Route path="/" exact component={Main} />
      <Route path="/about" exact component={About} />
      <Route path="/contact" exact component={Contact} />
      <Route path="/shop" exact component={Shop} />
      <Route component={Error404} />
    </Switch>
  </div>
</Router>

在工厂里，你会有

render() {
   return (
     <div>
        {/* other elements */ }
        <Route path="/shop/:itemId" exact component={ItemDetails} />
     </div>
   )
}

render（）{
返回(
{/*其他元素*/}
)
}

和在ItemDetails组件中

render() {
   if(!isValid(this.props.match.params.itemId)) {
       return <Redirect to="/404" />
   }
   return (
     <>{/* ItemDetails component code */}</>
   )
}

render（）{
如果（！isValid（this.props.match.params.itemId））{
返回
}
返回(
{/*项目详细信息组件代码*/}
)
}

实际上，我无法检查itemId是否有效。我试图说，如果url没有获取数据，那么我想显示错误消息。我修改了我的问题并提供了项目链接。告诉我，如果我做错了什么，或者问错了上面的问题。你找到解决办法了吗？