React-router-dom v6报Cannot read properties of undefined (reading 'location')如何解决

• 依赖版本冲突：项目同时安装了react-router@v5.2.1和react-router-dom@v6.0.1，两个关联依赖版本不匹配会触发内部逻辑错误，react-router-dom v6已内置对应版本的react-router，无需单独安装低版本的react-router。
• API语法不兼容：React Router v6对路由相关API做了破坏性更新，原v5版本中Route组件的component属性在v6中已被移除，替换为element属性；同时v6要求所有Route组件必须被包裹在Routes组件（替代v5的Switch组件）内部，不可直接嵌套在Router下使用。

1. 统一依赖版本，卸载冲突的低版本react-router：

# npm执行命令
npm uninstall react-router
npm install react-router-dom@6.0.1

# yarn执行命令
yarn remove react-router
yarn add react-router-dom@6.0.1

2. 修改代码为React Router v6兼容写法，调整后完整代码如下：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import AboutPage from './pages/aboutPage'

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <Routes>
        <Route path='/' element={<App />}/>
        <Route path='/about' element={<AboutPage />}/>
      </Routes>
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);

本次代码调整核心改动为：

• 新增引入Routes组件，包裹所有Route子项
• 将原Route的component属性替换为element，属性值传入组件实例而非组件本身

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