react-router-dom报错：无法读取undefined的pathname属性

你遇到的Cannot read properties of undefined (reading 'pathname')报错，是因为错误使用了react-router-dom导出的底层Router组件。
这个底层Router属于框架内部使用的低阶组件，要求手动传入location、navigator等必填属性，你直接使用时没有传任何对应参数，组件内部无法获取路由上下文，读取location.pathname时自然会触发undefined报错。

普通React单页应用开发不需要直接使用低阶Router组件，替换为官方封装好的高阶路由容器即可：

• 修改导入语句，根据你的路由场景选择对应封装组件，绝大多数浏览器端场景用BrowserRouter就可以：

// 错误写法
// import { Route, Routes, Router, NavLink } from "react-router-dom";

// 正确写法，直接导入BrowserRouter替换原有的Router
import { Route, Routes, BrowserRouter, NavLink } from "react-router-dom";

• 将模板中原来的<Router>标签替换为<BrowserRouter>即可，其他代码不需要改动：

function App() {
  return (
    <Box>
      <BrowserRouter>
        <NavBar />
        <Flex justifyContent="center" align="center">
          <NewClameCard />
        </Flex>
        <h1> Hello React!</h1>
        <Routes>
          <Route path="/home" element={<Home />}></Route>
        </Routes>
      </BrowserRouter>
    </Box>
  );
}

如果你确实需要使用底层Router（比如要自定义全局history对象、做路由拦截封装），必须手动传入必填的location和navigator参数，示例：

import { Router } from "react-router-dom";
import { createBrowserHistory } from "history";
const customHistory = createBrowserHistory();

// 使用时传参
<Router
  location={customHistory.location}
  navigator={customHistory}
>
  {/* 路由相关内容 */}
</Router>

普通业务开发不推荐这种写法，直接用官方封装好的BrowserRouter/HashRouter（hash模式路由用）即可。

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