React中使用Routes路由时页面空白问题求助

嘿，我看到你的问题了——访问http://localhost:3000/或http://localhost:3000/login时页面完全空白对吧？看了你的代码，问题出在React Router的Router组件缺失上。

问题原因 #

在React Router v6版本中，所有路由相关的组件（比如<Routes>、<Route>）都必须包裹在一个路由容器组件（比如<BrowserRouter>）内部才能正常工作。你的App.js里只渲染了<Routes>，没有外层的Router容器，导致路由系统无法初始化，自然也就无法渲染对应的页面组件，所以页面显示空白。

修改后的代码 #

只需要在App.js中导入BrowserRouter（通常我们会重命名为Router方便使用），然后用它把<Routes>整个包裹起来就可以了：

import React from 'react'
import Login from './pages/login'
import Home from './pages/home'
import Error from './pages/error'
// 导入BrowserRouter并命名为Router
import { Link, BrowserRouter as Router, Route, Routes } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/login" element={<Login />} />
        <Route path="*" element={<Error />} />
      </Routes>
    </Router>
  )
}
export default App;

补充说明 #

• BrowserRouter是React Router最常用的路由容器，它基于HTML5的History API来管理路由状态，适合大多数单页应用场景。
• 确保你的Login组件本身也有正确的内容渲染（比如类似Home组件的返回内容），否则访问/login时可能还是会看起来空白哦。

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