React Routes路由页面内容不显示问题求助

1. 修正根路由路径 #

在React Router v6中，path="/*"是用于嵌套路由的通配匹配，若要将Home作为根页面（访问/时显示），需把路径改为"/"：

import React from 'react'
import { Routes, Route } from 'react-router-dom'; // 导入的useNavigate未使用，可移除

import Login from './components/Login';
import Home from './container/Home';

const App = () => {
  return (
   <Routes>
     <Route path="/login" element={<Login />} />
     <Route path="/" element={<Home />} /> {/* 修改为根路径 */}
   </Routes>
  );
};

export default App;

2. 确认组件导入路径 #

检查文件目录结构与导入路径是否匹配：

• 确保Login.jsx在src/components/目录下
• 确保Home.jsx在src/container/目录下
  部分项目需要明确导入.jsx后缀，可尝试：

import Login from './components/Login.jsx';
import Home from './container/Home.jsx';

3. 适配React 18渲染方式 #

若使用React 18，旧版ReactDOM.render已被废弃，可能导致渲染异常，修改index.js：

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

import App from './App';
import './index.css';

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

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

4. 验证路由访问路径 #

启动项目后分别访问：

• http://localhost:3000/ 应显示Home页面
• http://localhost:3000/login 应显示Login页面

若仍空白，打开浏览器开发者工具（F12）：

• 查看Console面板是否有隐藏报错
• 检查Elements面板，确认组件是否已渲染到DOM中（可能是样式问题导致文本不可见）

内容的提问来源于stack exchange，提问作者Gábor Adorjáni