React Router Dom首页在Django中不显示的问题解决咨询

1. 修复React组件的基础错误 #

你的App.jsx中使用了useState但未导入React的useState钩子，这会直接导致组件渲染失败，引发页面空白：
修改App.jsx，添加钩子导入：

import { useState } from 'react'; // 新增这一行
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
import Layout from "./pages/Layout";
import Boards from "./pages/board/Boards";

export default function App() {
    const [current, setCurrent] = useState();
    // ... 其余代码不变
}

2. 配置React Router的基础路径（basename） #

你的React应用挂载在Django的/[username]/子路径下，而非域名根目录，BrowserRouter必须设置basename匹配这个前缀，否则路由会出现错位：
修改App.jsx中的BrowserRouter部分：

export default function App() {
    const [current, setCurrent] = useState();
    // 从当前URL提取基础路径，例如 "/your-username"
    const basename = window.location.pathname.split('/').slice(0, 2).join('/');

    return (
        <>
            <BrowserRouter basename={basename}>
                <Routes>
                    <Route
                        path="/"
                        element={<Layout setCurrent={setCurrent} />}
                    >
                        {/* 改用相对路径跳转，避免绝对路径的前缀冲突 */}
                        <Route index element={<Navigate to="boards" />} />
                        <Route path="boards" element={<Boards />} />
                        ...
                    </Route>
                </Routes>
            </BrowserRouter>
        </>
    );
}

3. 确保Django与React路由协同工作 #

Main应用urls.py里的re_path(r".*", views.index, name='index')配置是正确的，它会将/[username]/下的所有子路径转发给React处理，但需要确认views.index渲染的模板包含正确的React根元素：
检查Main的views.py对应的模板，确保存在：

<div id="root"></div>

同时用Django的{% static %}标签正确加载React的JS/CSS静态资源。

4. 优化API请求路径 #

将main.jsx中的硬编码API地址改为相对路径，避免环境切换时的适配问题：

// 原代码
const res = await fetch(`http://127.0.0.1:8000/api/${model}`);
// 修改为
const res = await fetch(`/api/${model}`);

验证效果 #

1. 重启Django服务器和React开发服务（如果使用Vite的npm run dev）
2. 登录后访问/[username]/，此时会正确跳转到/[username]/boards，Boards组件将正常渲染，不再显示空白页面。

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