ReactJS: обработка недопустимых динамических ссылок и отображение сообщения об ошибке 404

Question

Ссылка на приложение: https://codesandbox.io/s/distracted-darwin-rq1ew?fontsize=14

Аналогичный вопрос: Как обрабатывать 404 в динамических страницах Reactjs на основе ответа Ajax?

Я получаю вызов APIи рендеринг только имен из данных в Shop компонент.Затем предоставим динамическую ссылку на это имя, указав идентификатор, т.е. /shop/:itemId.

Здесь я хочу обработать «ошибка страницы не найдена (404)», когда эта itemId неверна или если пользователь вводит что-либо, кроме действительногоid.

<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/valid-id-OR-invalid-id, это рендеринг Error404 компонентатолько.Как мне решить эту проблему?

PS: если я удаляю exact, то он отлично работает для путей типа /contac или /abou, он рендерит компонент Error404, только если вы неправильно написали имя пути.Но если я попытаюсь /contact/asdasdasdd, то он отдает Contact компонент.Есть ли другой способ решить эту проблему?

Answer 1

Особенность Router заключается в том, что, если у вас нет Switch, он будет отображать все маршруты, которые являются префиксами для соответствующего Route.В вашем случае "/shop/:itemId" будет соответствовать как "/shop/:itemId", так и *, и, следовательно, будет отображаться компонент Error.

Также из v4 или Router вам необходимо иметь вложенные Routes внутри самих компонентов.Также вам необходимо принять решение о том, является ли 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>

, а в компоненте Shop у вас будет

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

и в компоненте ItemDetails

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