React v18登录页面无法渲染：路由报错(pathname未定义)求助

问题原因 #

你直接使用的<Router>是React Router的底层基础组件，它需要手动传入history等核心上下文依赖才能正常运行。如果没有提供这些依赖，组件内部尝试读取pathname时就会因为上下文未定义抛出错误。

解决方案 #

React Router提供了封装好的开箱即用路由组件（比如BrowserRouter、HashRouter），这些组件会自动处理history等上下文配置，直接替换掉你代码中的<Router>即可。

修改后的Index.js代码 #

import { createRoot } from 'react-dom/client';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';
import React from 'react';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
<React.StrictMode>
  <Router>
    <App/>
  </Router>
</React.StrictMode>
);

补充说明 #

• 如果你需要哈希模式路由，可以将BrowserRouter替换为HashRouter，用法完全一致；
• 确认你的react-router-dom版本为v6，因为你代码中使用的<Routes>和element属性是v6的专属语法，版本不匹配也可能引发其他问题。

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