React路由报错：Uncaught TypeError: Cannot read properties of undefined (reading 'pathname')

你遇到的这个错误核心原因是路由上下文冲突+组件不在路由上下文范围内，和to/href的替换无关，具体问题出在两处：

1. Navbar组件内部嵌套了<Router>，但app.js中已经在后续代码里使用了<BrowserRouter>，重复的路由上下文会导致Link无法正确获取路由对象。
2. Navbar在app.js中位于<BrowserRouter>外部，导致Link组件无法访问路由上下文。
3. Navbar里的navbar-brand仍使用原生<a href="/">，会触发页面全量刷新，破坏单页应用特性。

修复步骤： #

1. 修改Navbar组件，移除多余Router并替换a标签为Link

import { Link } from 'react-router-dom';
export default function Navbar(props) {
  return (
    <nav className={`navbar navbar-expand-lg navbar-${props.mode} bg-${props.mode}`}>
      <div className="container-fluid">
        {/* 替换原生a标签为Link组件 */}
        <Link className="navbar-brand" to="/">{props.title}</Link>
        <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse" id="navbarSupportedContent">
          <ul className="navbar-nav me-auto mb-2 mb-lg-0">
            <li className="nav-item">
              <Link className="nav-link active" aria-current="page" to="/">Home</Link>
            </li>
            <li className="nav-item">
              <Link className="nav-link" to="/about">{props.aboutus}</Link>
            </li>
          </ul>
          <div className={`form-check form-switch text-${props.mode === 'light'?'dark':'light'}`}>
            <input className="form-check-input" onClick={props.toggleMode} type="checkbox" role="switch" id="flexSwitchCheckDefault"/>
            <label className="form-check-label" htmlFor="flexSwitchCheckDefault">Enable Dark Mode</label>
          </div>
        </div>
      </div>
    </nav>
  )
}

2. 调整app.js结构，将Navbar放入BrowserRouter内部

确保所有使用路由功能的组件都在路由上下文范围内：

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

return (
  <BrowserRouter>
    <Navbar
      title="Texter"
      aboutus="AboutTextUtils"
      toggleMode={toggleMode}
      mode={mode}
    ></Navbar>
    <Routes>
      <Route path="/about" element={<About />} />
      <Route
        path="/"
        element={<Text title="Enter the text below" mode={mode}/>} 
      /> 
    </Routes>
  </BrowserRouter>
)

核心原理： #

React Router v6中，Link、useNavigate等路由相关组件必须包裹在同一个路由上下文提供者（如BrowserRouter）内部，整个应用只需要一个最外层的BrowserRouter即可，嵌套多个路由上下文或让组件脱离上下文都会导致路由对象无法获取，进而触发pathname相关错误。

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