React Router Dom 无法渲染PageNotFound组件问题咨询

你的问题出在通配符路由的配置上，在React Router v6版本中，要匹配所有未定义的URL，必须给404路由明确设置path="*"，而且要放在所有路由的最后面，确保前面的路由都不匹配时才触发。

另外注意：React Router v6已经移除了exact属性，默认就是精准匹配，所以path='/'不需要再加exact了。

修改后的完整代码如下：

function App() {
  return (
    <div className="app">
      <BrowserRouter>
        <Header></Header>
        <Routes>
          <Route path='/' element={<Home />} />
          <Route path='/movie/:imdbID' element={<MovieDetails />} />
          <Route path="*" element={<PageNotFound />} />
        </Routes>
        <Footer />
      </BrowserRouter>
    </div>
  );
}

额外检查：确认PageNotFound组件已经正确导入到当前文件中，避免因未导入导致的组件无法渲染问题。

内容的提问来源于stack exchange，提问作者5ecured