React路由报错：Uncaught TypeError: 无法读取undefined的pathname属性

你的问题核心是重复嵌套Router实例，同时存在路由库混用、API使用错误的问题，具体分析和修复如下：

问题原因拆解 #

1. 重复Router嵌套：index.js中已经通过ConnectedRouter提供了路由上下文，App.js里又额外包裹了BrowserRouter，多个Router实例会导致路由上下文混乱，引发pathname读取失败的错误。
2. 路由库混用：index.js导入的Route、Routes来自react-router，而App.js来自react-router-dom，React Router v6后所有核心API应统一从react-router-dom导出，混用会导致API或版本不一致。
3. 过时API使用：React Router v6彻底废弃了Route的component属性，需改用element指定渲染组件。

修改后的代码 #

index.js #

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux'
import { Route, Routes } from 'react-router-dom' // 统一从react-router-dom导入
import { ConnectedRouter } from 'connected-react-router'
import App from "./App";
import { store, history } from './configureStore'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <Routes>
                <Route path="/*" element={<App />} /> {/* 改用element属性，path设为/*匹配子路由 */}
            </Routes>
        </ConnectedRouter>
    </Provider>
);

App.js #

import React from 'react';
import {requests} from "./agent";
import Navigation from "./components/Navigation";
import { Route, Routes } from "react-router-dom";
import HomePage from "./Pages/HomePage";
import LoginPage from "./Pages/LoginPage";
import RegisterPage from "./Pages/RegisterPage";
import Dashboard from "./Pages/Dashboard";
import News from "./Pages/News";
import Missions from "./Pages/Missions";
import Associations from "./Pages/Associations";

class App extends React.Component{
    constructor(props) {
        super(props);
        const token = window.localStorage.getItem('jwtToken');

        if(token) {
            requests.setToken(token)
        }
    }

    render() {
        return (
            <> {/* 移除多余的BrowserRouter */}
                <Navigation  />
                <Routes>
                    <Route path='/' element={<HomePage />}/>
                    <Route path='/login' element={<LoginPage />}/>
                    <Route path='/register' element={<RegisterPage />}/>
                    <Route path='/dashboard' element={<Dashboard />}/>
                    <Route path='/news' element={<News />}/>
                    <Route path='/missions' element={<Missions />}/>
                    <Route path='/associations' element={<Associations />}/>
                </Routes>
            </>
        )
    }
}

export default App;

额外注意事项 #

• index.js中路由path设为/*，确保ConnectedRouter能匹配到App组件内的所有子路由，保证嵌套路由正常工作。
• 确认connected-react-router版本与当前React Router、React版本兼容，避免版本不匹配引发其他异常。

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