React Router v5升级至v6报错：无法读取pathname属性

错误原因 #

React Router v6 完全重构了路由体系：

• Router 组件不再接收 history 属性，你传入的createMemoryHistory实例无法被正确识别，导致内部无法读取pathname
• 自定义路由组件（如你的AuthenticatedRoute）的写法不再兼容v6的路由结构
• Route 组件的语法从children改为element，且不再需要exact属性（v6默认按最长路径匹配）

修改后的完整代码 #

import React, { useState, useEffect } from "react";
// 替换Router为BrowserRouter，适配v6的路由体系
import { BrowserRouter as Router, Routes, Route, Navigate, Outlet } from "react-router-dom";
import AddMoviePage from "../pages/add-movie-page";
import EditMoviePage from "../pages/edit-movie-page";
import AccountPage from "../pages/account-page";
import MoviesPage from "../pages/movies-page";
import NotFoundPage from "../pages/not-found-page";
import { auth } from "../data/firebase";
import Nav from "./nav";

// 重构为v6风格的保护路由组件
function AuthenticatedRoute({ isAuthenticated }) {
  // 可选：用户状态未加载时可添加loading状态
  if (isAuthenticated === undefined) {
    return <div>加载中...</div>;
  }
  return isAuthenticated ? <Outlet /> : <Navigate to="/account" replace />;
}

function App() {
  const [user, setUser] = useState(null);
  const isAuthenticated = user !== null;

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((currentUser) => {
      setUser(currentUser);
    });
    return unsubscribe;
  }, []);

  return (
    <Router>
      <Nav user={user} />
      <Routes>
        {/* 公开路由：账号页面 */}
        <Route path="/account" element={<AccountPage user={user} />} />

        {/* 保护路由组：所有需要登录的页面 */}
        <Route element={<AuthenticatedRoute isAuthenticated={isAuthenticated} />}>
          <Route path="/" element={<MoviesPage user={user} />} />
          <Route path="/add" element={<AddMoviePage user={user} />} />
          <Route path="/edit/:id" element={<EditMoviePage user={user} />} />
        </Route>

        {/* 404页面 */}
        <Route path="*" element={<NotFoundPage />} />
      </Routes>
    </Router>
  );
}

export default App;

关键修改点 #

1. 路由组件替换：用BrowserRouter替代原Router，Electron环境下BrowserRouter可直接适配，无需手动传入history实例
2. 保护路由重构：v6中用Outlet作为嵌套路由的出口，保护路由只需判断权限，决定渲染允许访问的页面或重定向到登录页
3. Route语法更新：所有Route改用element属性传入组件，去掉exact（v6默认按最长路径匹配，根路径只会匹配"/"本身）
4. 移除无用代码：删除createMemoryHistory相关代码，v6不再需要手动管理history实例

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