React+Django项目Router路由组件无法渲染求助

问题背景 #

在React+Django项目中使用react-router-dom@6.17.0配置路由后，组件无法正常渲染。环境版本：react@18.2.0，已确认HTML结构正常，问题出在路由相关配置上。

相关代码 #

App.js #

import React, { Component } from "react";
import { render } from "react-dom";
import HomePage from "./Homepage";

export default class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    console.log("App Here");
    return (
        <HomePage />
    );
  }
}

const appDiv = document.getElementById("app");
render(<App />, appDiv);

HomePage.js #

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

export default class HomePage extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        console.log("homePage Here")
        return (
            <BrowserRouter>
                <Routes>
                    <Route path="/" element={<p>Test</p>} />
                    <Route path="/join" element={<RoomJoinPage />} />
                </Routes>
            </BrowserRouter>
        );
    }
}

RoomJoinPage.js #

import React from "react";

export default function RoomJoinPage() {
  console.log("RoomJoinPage component is rendering.");
  return <h1>Room Join Page</h1>;
}

解决思路及步骤 #

1. 修正React 18的渲染方式 #

React 18已废弃旧版react-dom.render方法，改用createRoot是路由正常工作的前提。修改App.js的渲染代码：

import React, { Component } from "react";
import { createRoot } from "react-dom/client";
import HomePage from "./Homepage";

export default class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    console.log("App Here");
    return (
        <HomePage />
    );
  }
}

const appDiv = document.getElementById("app");
const root = createRoot(appDiv);
root.render(<App />);

2. 配置Django路由支持前端单页路由 #

Django会拦截前端路由请求返回404，需将所有非API请求转发到React入口HTML：
修改Django项目的urls.py：

from django.urls import path
from django.views.generic import TemplateView

urlpatterns = [
    # 保留你的API接口路由（放在前端路由之前）
    # path('api/...', ...),
    
    # 根路径指向React入口
    path('', TemplateView.as_view(template_name='index.html')),
    # 通配所有其他路径，统一指向React入口
    path('<path:path>', TemplateView.as_view(template_name='index.html')),
]

确保index.html中存在React挂载元素：

<div id="app"></div>

3. 使用React Router规范跳转方式 #

避免用原生<a>标签触发页面刷新，改用Link组件实现单页跳转：
修改HomePage.js的根路由元素：

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

export default class HomePage extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        console.log("homePage Here")
        return (
            <BrowserRouter>
                <Routes>
                    <Route path="/" element={
                        <>
                            <p>Test</p>
                            <Link to="/join">进入房间</Link>
                        </>
                    } />
                    <Route path="/join" element={<RoomJoinPage />} />
                </Routes>
            </BrowserRouter>
        );
    }
}

4. 验证渲染效果 #

启动Django后端和React前端服务：

• 访问根路径/，可见Test文本和跳转链接
• 点击链接后路由切换到/join，页面显示"Room Join Page"，控制台输出对应日志，说明组件渲染正常

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