直接转到嵌套路由时，React-Router显示错误页面

Question

当我输入博客文章的URL（例如：localhost / blog / clothing-article）半秒钟时，我会看到我的Error 404页面，然后是该博客文章。我该如何预防？

我理解此“问题”的方式是，在呈现嵌套路由/我的博客项目组件（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>

还有我的blog.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>