Question

我在Route组件中使用路径变量。最初，我有

<Route path={"/:brand/"} component={HomeContainer} />

但是我不得不将path属性更改为

path={"/:brand(brandOne|brandTwo)/"}

因为错误的URL似乎有效。上面的代码适用于我的两个品牌部分。

由于我有很多产品，并且我不希望随机的错误URL显示带有SiteHeader和SiteFooter的空白页，您如何建议对我的产品容器执行此操作。

谢谢

Answer 1

如果要验证的参数很多，则可以将有效的参数简单地存储在数组中，然后在渲染时检查参数。如果参数不在其中，则重定向到404或主页 >

render() {
   const { match} = this.props;
   if(!validParams.includes(match.params.brand)) {
      return <Redirect to="/404" />
   } 
   // return normal component here
}

无效的路由似乎有效

1 个答案: