Неправильные маршруты кажутся действительными

Question

Я использую переменные пути в моих компонентах Route. Изначально у меня было

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

но мне пришлось изменить атрибут пути на

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

, поскольку неправильные URL-адреса оказались действительными. Код выше работает для моих 2 разделов бренда.

Как бы вы посоветовали мне сделать это для моего контейнера товаров, так как у меня много товаров, и я не хочу, чтобы случайные неправильные 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
}