ReactJS Routes组件失效：替换Switch后仍显示空白页面

你的空白页面问题源于react-router-dom v6版本的Route API与v5完全不兼容，你的代码仍沿用v5写法，导致路由组件无法正确渲染。具体问题点及修复方式如下：

核心问题点 #

1. 根路径的<Route>未通过element属性传递渲染内容，v6中Route不再支持直接嵌套子元素
2. v6已移除<Route>的component属性，需改用element属性接收组件JSX
3. Redirect在v6中已被Navigate组件替代（若后续需重定向功能）

修复后的Homepage组件代码 #

import React, { Component } from "react";
import RoomJoinPage from "./RoomJoinPage";
import CreateRoomPage from "./CreateRoomPage";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link,
  Navigate, // 替换原Redirect
} from "react-router-dom";

export default class Homepage extends Component {
  render() {
    return (
      <Router>
        <Routes>
          {/* 根路径：通过element传递渲染内容 */}
          <Route path="/" element={<p>This is the Homepage</p>} />
          {/* 其他路由：用element替代component，传入组件JSX */}
          <Route path="/join" element={<RoomJoinPage />} />
          <Route path="/create" element={<CreateRoomPage />} />
          {/* 可选：添加全局404重定向 */}
          {/* <Route path="*" element={<Navigate to="/" replace />} /> */}
        </Routes>
      </Router>
    );
  }
}

额外说明 #

• 确认react-router-dom版本：执行npm list react-router-dom查看版本，若为v5则需换回Switch并保留component写法；若使用Routes则需升级到v6。
• App.js代码无需修改，保持现有结构即可。

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