React Router Dom v6页面空白不渲染问题求助（附代码）

你的代码存在两个关键问题，导致页面空白：

1. 重复嵌套 <Router> 组件 #

App.js 中已经通过 <Router> 包裹了整个应用，提供了路由上下文。但 HomePage.js 里又嵌套了一层 <Router>，这会导致路由上下文冲突，React Router 不允许多层 Router 嵌套，必须只保留最外层的路由容器。

2. 根路由未遵循 v6 语法规范 #

React Router v6 要求所有 <Route> 必须通过 element 属性指定要渲染的内容，你根路由的写法还是旧版的嵌套子元素（直接把 <p> 放在 <Route> 标签内），这种写法在 v6 中已被废弃，会导致该路由无法渲染任何内容。

修改后的代码 #

只需要调整 HomePage.js：

import React,{Component} from 'react';
import RoomJoinPage from "./RoomJoinPage";
import CreateRoomPage from "./CreateRoomPage";
import { Routes, Route } from "react-router-dom" 

export default class HomePage extends Component{
    render () {
        return ( 
            <Routes>
                {/* 根路由通过element属性指定渲染内容 */}
                <Route path='/' element={<p>This is Home Page</p>} />
                <Route path='/join' element={<RoomJoinPage />} />
                <Route path='/create' element={<CreateRoomPage />} />
            </Routes>
        );
    }
}

额外说明 #

• 若想将根路由设为默认匹配的路由，也可以使用 index 属性代替 path='/'，写法如下：

  <Route index element={<p>This is Home Page</p>} />
  

  这种写法更符合 v6 的路由设计逻辑，index 路由会匹配父路由的默认路径。

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