React Router v6路由不生效 导入组件无法正常渲染

• 开发React项目时出现组件渲染阻塞：路由关联组件无法正常识别渲染
• 编辑器可识别已导入的组件文件，但组件名称未显示对应语法高亮
• 项目启动运行后，直接写在路由容器外的Header、Footer组件可正常展示，所有配置的路由规则均不生效，对应路由页面内容完全无法渲染
• 项目核心依赖版本：react-router-dom@6.3.0、react@18.2.0

使用了React Router v5版本的路由写法，和当前安装的v6版本API不兼容：

1. React Router v6 移除了v5版本中Route组件的component、render属性，统一使用element属性接收要渲染的内容
2. element属性要求传入JSX元素节点，而非组件本身的引用
3. 404兜底路由缺少通配符路径配置path="*"，无法匹配所有未定义的路由路径

原App组件中错误的路由配置：

<Routes>
    <Route path="/"  component= {Home} />
    <Route path="/movie/:imdbID" component={MovieDetails}/>
    <Route element={PageNotFound}/>
</Routes>

修改App组件中的路由配置，适配v6版本API规范，修复后完整代码如下：

import React from 'react';
import {BrowserRouter as Router, Route, Routes} from "react-router-dom";
import './App.scss';
import Header from "./components/Header/Header";
import Home from "./components/Home/Home";
import MovieDetails from "./components/MovieDetails/MovieDetails";
import Footer from "./components/Footer/Footer";
import PageNotFound from "./components/PageNotFound/PageNotFound";

function App() {
  return (
    <div className="app">
     <Router>
      <Header />
      <Routes>
          {/* v6版本element属性传入JSX标签，而非组件引用 */}
          <Route path="/"  element={<Home />} />
          <Route path="/movie/:imdbID" element={<MovieDetails />}/>
          {/* 404路由添加path="*"通配符，匹配所有未定义路径 */}
          <Route path="*" element={<PageNotFound />}/>
      </Routes>
      <Footer />
     </Router>
    </div>
  );
}

export default App;

修改保存后重启开发服务，路由即可正常匹配渲染对应组件。

注：Header、Footer组件不受路由配置错误影响，是因为二者作为普通React组件直接写在路由容器下，不属于路由规则控制渲染的内容，所以可以正常展示。

内容的提问来源于stack exchange，提问作者Angel Ortiz