react-router-dom v6读取pathname属性抛出两个错误该如何解决？

DevOps 小满

2026-9-27

问题解决方法

报错根因

你使用了react-router-dom v6的底层Router组件且未传入必要的history参数。Router作为核心底层组件不会默认创建history实例，缺少参数时内部拿到的location值为undefined，就会触发你遇到的pathname解构报错，和报错指向的react-router源码位置完全对应。

修复方案

方案一（优先推荐，改动最小）

直接将导入的Router替换为封装好的上层路由组件BrowserRouter（浏览器端路由场景），不需要额外传参，BrowserRouter内部已经内置了history实例创建逻辑，修改导入代码即可，其余JSX结构无需调整：

// 把原来的Router导入替换成下面的写法
import { BrowserRouter as Router, Routes, Route, Link, NavLink } from 'react-router-dom'
import Home from './views/Home.jsx';

function App() {
  return (
    <Router>
      <div>
        <Link to="/home">Home</Link>
      </div>
      <Routes>
        <Route path="/home" element={<Home/>}/>
      </Routes>
    </Router>
  );
}

export default App;

方案二（自定义history场景使用）

如果你确实需要自定义history实例（比如要在组件外部操作路由），可以手动创建history实例传入Router组件：

import { Router, Routes, Route, Link, NavLink } from 'react-router-dom'
// 从history包导入创建方法
import { createBrowserHistory } from 'history'
// 手动创建history实例
const history = createBrowserHistory()
import Home from './views/Home.jsx';

function App() {
  return (
    {/* 把创建好的history传给Router组件 */}
    <Router history={history}>
      <div>
        <Link to="/home">Home</Link>
      </div>
      <Routes>
        <Route path="/home" element={<Home/>}/>
      </Routes>
    </Router>
  );
}

export default App;