React-Router, отображающий страницу ошибки при переходе непосредственно к вложенному маршруту

Question

Когда я в течение полсекунды ввожу URL-адрес для записи в блоге (например, localhost / blog / clothing-article), я вижу свою страницу с ошибкой 404 и после этого запись в блоге.Как я могу предотвратить это?

Насколько я понимаю, эта «проблема» заключается в том, что переключение сработало до рендеринга компонента элемента nested-route / my blog (duuh).Также не нравится идея загрузки всех существующих путей к сообщениям в блоге, поэтому коммутатор знает о них.

Моя текущая настройка: Main.tsx

<BrowserRouter>
  <div className="main">
    <Header />
    <Switch>
       <Route exact path='/' component={Home} />
       <Route path='/portfolio' component={Portfolio} />
       <Route path='/about' component={About} />
       <Route path='/blog' component={Blog} />
       <Route component={ErrorPage} />
    </Switch>
    <BackTop />
  </div>
</BrowserRouter>

И мой блог.tsx с разделом для отображения элемента блога

<div>
   {this.props.match && this.props.match.isExact &&
     <ul className={styles.blog}>
       {blogPosts.length > 0 &&
           postElements
       }
     </ul>
   }
   {this.props.match && !this.props.match.isExact &&
      <Route 
        path={`${this.props.match.url}/:slug`} 
        render={(props) => <BlogItem allPostData={blogPosts} {...props} />} />
   }
</div>