React.js动态路由配置后页面空白问题求助

核心问题分析 #

• 路由配置冲突：根路由下两个子路由同时设置index: true，React Router无法确定默认渲染哪个组件，导致页面无内容
• 动态路由未定义路径：User组件需要获取id参数，但路由未配置带:id的动态路径，且未给User设置独立访问路径，无法正确匹配路由
• 组件声明顺序错误：懒加载组件的定义放在Router函数之后，函数执行时组件尚未声明，可能引发渲染异常
• useEffect依赖缺失：User组件的请求依赖params.id，但未将其加入依赖数组，可能导致请求参数错误或参数变化时不重新请求

修复步骤 #

1. 修正路由配置 #

调整路由结构，给User设置独立动态路径，移除重复的index: true，并将懒加载组件声明移至Router函数之前：

// 先声明懒加载组件
const HomePage = Loadable(lazy(() => import("../pages/HomePage")));
const User = Loadable(lazy(() => import("../pages/User")));
const Page404 = Loadable(lazy(() => import("../pages/Page404")));

export default function Router() {
  return useRoutes([
    {       
      path: "/",
      element: <Layout />,
      errorElement: <Page404 />,
      children: [
        { element: <HomePage />, index: true }, // 唯一默认子路由
        { 
          path: "user/:id", // 配置动态路径，匹配/user/1、/user/2等格式
          element: <User /> 
        },
      ],     
    },  
  ]); 
}

2. 修复User组件问题 #

• 移除无用的withRouter（函数组件使用useParams即可）
• 给useEffect添加params.id依赖，确保参数变化时重新发起请求
• 新增加载/错误状态，避免请求过程中页面空白

import React, { useEffect, useState } from "react";
import { useParams } from "react-router";
import axios from "axios";

const User = () => {
    const { id } = useParams(); // 解构参数更清晰
    const [user, setUser] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        async function fetchData() {
            setLoading(true);
            try {
                const res = await axios(
                    `https://jsonplaceholder.typicode.com/comments/${id}`
                );
                setUser(res.data);
                setError(null);
            } catch (err) {
                setError("加载用户数据失败");
                console.error(err);
            } finally {
                setLoading(false);
            }
        }
        if (id) { // 确保id存在时再发起请求
            fetchData();
        }
    }, [id]); // 添加id作为依赖

    if (loading) return <div>加载中...</div>;
    if (error) return <div>{error}</div>;
    if (!user) return <div>未找到用户数据</div>;

    return (
        <>
            <div>Hello worldddddddd</div>
            <div>用户ID: {id}</div>
            <div>用户名称: {user.name}</div>
        </>
    );
};

export default User;

3. 验证访问路径 #

现在可以通过正确的动态路径访问User页面，例如：http://localhost:3000/user/1，页面会正常渲染内容并加载对应数据。

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