MERN应用React Router v6路由配置后渲染异常问题求助

我正在开发一款MERN栈应用，目前已完成后端开发，刚着手前端路由配置工作。完成前端路由添加后，页面无任何内容展示（白屏），控制台抛出如下错误：

项目目录结构 #

项目目录结构如下：

App.js 代码 #

// import bootstrap
import "bootstrap/dist/css/bootstrap.min.css";
// import Routers
import {BrowserRouter as Router, Route} from "react-router-dom";

import Navbar from "./components/navbar.component";
import ExerciseList from "./components/exercises-list.component";
import EditExercise from "./components/edit-exercise.component";
import CreateExercise from "./components/create-exercise.component";
import CreateUser from "./components/create-user.component";


function App() {
  return (
    <Router>
      
      <Navbar/>
      <br/>
      
      <Route exact path="/" component={ExerciseList}/>
      <Route path="/edit/:id" component={EditExercise}/>
      <Route path="/create" component={CreateExercise}/>
      <Route path="/user" component={CreateUser}/>

    </Router>

  );
}

export default App;

package.json 代码 #

{
  "name": "exercise-tracker",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.1.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

navbar.component.js 代码 #

import React, {Component} from 'react'
import { Link } from 'react-router-dom';

export default class Navbar extends Component {
    render() {
        return (
            <nav className="navbar navbar-expand-lg navbar-light bg-light">
                <Link to="/" className="navbar-brand">Exercise Tracker</Link>
                <div className='collapse navbar-collapse'>
                    <ul className="navbar-nav mr-auto">
                        <li className="navbar-item"><Link to="/" className="nav-link">Exercises</Link></li>
                        <li className="navbar-item"><Link to="/create" className="nav-link">Create Exercise Log</Link></li>
                        <li className="navbar-item"><Link to="/user" className="nav-link">Create User</Link></li>
                    </ul>
                </div>
            </nav>
        )
    }
}

我按照控制台提示修改App.js，新增引入Routes组件并用其包裹所有Route项，同时将App.js的导入语句从import {BrowserRouter as Router, Route} from "react-router-dom"更新为import {BrowserRouter as Router, Route, Routes} from "react-router-dom"。

该修改解决了白屏和初始控制台报错问题，但点击导航栏链接时，对应路由的主体内容无法正常渲染，控制台抛出如下新错误：

目前暂未找到后续排查方向。

问题根因 #

你安装的react-router-dom版本为6.3.0，属于v6大版本，和网上多数旧教程基于的v5版本存在大量破坏性API变更，你仅补充了Routes包裹层，没有同步修改Route的渲染规则，才会出现跳转后内容不渲染的报错。

v6和你当前写法的核心差异：

• 所有Route必须嵌套在Routes组件内，这一步你已经改对
• Route不再支持component/render属性传组件，统一替换为element属性，属性值需要传入JSX格式的组件标签，不能直接传组件引用
• v6默认路由匹配规则为精确匹配，不需要额外添加exact属性
• v6移除了旧版的withRouter高阶组件，类组件获取路由参数、跳转方法需要自行封装HOC，更推荐改写为函数组件使用useParams/useNavigate等钩子实现

修复方案 #

直接替换App.js代码为如下内容即可解决当前渲染报错：

// import bootstrap
import "bootstrap/dist/css/bootstrap.min.css";
// import Routers
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

import Navbar from "./components/navbar.component";
import ExerciseList from "./components/exercises-list.component";
import EditExercise from "./components/edit-exercise.component";
import CreateExercise from "./components/create-exercise.component";
import CreateUser from "./components/create-user.component";


function App() {
  return (
    <Router>
      <Navbar/>
      <br/>
      <Routes>
        <Route path="/" element={<ExerciseList />} />
        <Route path="/edit/:id" element={<EditExercise />} />
        <Route path="/create" element={<CreateExercise />} />
        <Route path="/user" element={<CreateUser />} />
      </Routes>
    </Router>
  );
}

export default App;

后续开发EditExercise组件获取动态路由id参数时，直接引入useParams钩子调用即可：

import { useParams } from 'react-router-dom';

// 函数组件内部直接获取
const { id } = useParams();

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