React使用BrowserRouter报错无法读取undefined的pathname属性

你这个报错是两个低级问题叠出来的，之前做的重装依赖、清缓存、删node_modules全是无效操作，根本碰不到问题点：

• 第一，index.js里直接引入了底层Router组件包裹App，但没有给它传入必须的history对象，Router拿不到路由上下文自然读不到pathname属性直接报错。而且你App.js里本身已经写了BrowserRouter，外面这层Router完全是多余的。
• 第二，你装的react-router-dom是5.x版本，但代码里写的<Routes>、element={xxx}全是6.x版本的API，5.x根本不认这些写法，就算去掉外层多余的Router也会报其他错。

方案1：保留现有v5版本依赖，改代码适配v5语法 #

1. 修改index.js，删掉多余的Router包裹，改成下面这样：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />    
  </React.StrictMode>
);

2. 修改App.js，把v6的Routes/element写法换成v5兼容的Switch/render写法：

import React from "react";
import {
  BrowserRouter,
  Switch,
  Route,
  Link,
} from "react-router-dom";

import Home from './AppHome'

function App() {
    return (
      <div>
        <BrowserRouter>
          <nav>
            <Link to="/">Home</Link>
            <Link to="/test">Test Page</Link>
          </nav>

          <Switch>
            <Route path="/" exact component={Home} />
            <Route path="/test" render={() => (
              <div><h1>Test Test Test</h1></div>
            )}/>
          </Switch>
        </BrowserRouter>
      </div>
    )
}

export default App;

*注意v5里要给根路径加exact属性，不然匹配到/的时候会把所有路由都渲染出来。

方案2：保留现有v6写法的代码，升级依赖到v6版本 #

1. 先执行命令升级react-router-dom到6.x版本：

npm uninstall react-router-dom
npm install react-router-dom@6

2. 修改index.js，删掉多余的Router包裹，代码和方案1里的index.js一致即可，不需要额外套任何路由组件，因为App.js里已经有BrowserRouter提供路由上下文了。
3. App.js和AppHome.js的现有代码不用改，升级完依赖直接运行即可。

你package.json里把npm和node写到dependencies里是完全没用的，这两个是运行环境，不是前端代码需要打包的依赖，装了只会平白增加node_modules体积，可以直接删掉这两行配置。

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