React.js项目动态路由跳转404错误排查求助

核心问题 #

你的路由配置文件未定义/user/:id这条动态路由规则，当点击跳转链接时，React Router找不到对应的路由匹配项，就触发了兜底的404导航逻辑。

具体修改步骤 #

1. 补充动态路由配置 #

在src/routes/index.js中，先导入User组件，再在路由规则里添加动态路由：

// 先添加User组件的懒加载导入
const User = Loadable(lazy(() => import("../components/User"))); // 注意路径要和你的User.js实际位置匹配

// 在Layout的children数组中添加动态路由
export default function Router() {
  return useRoutes([
    {
      path: "/",
      element: <Layout />,
      children: [
        { element: <HomePage />, index: true },
        { path: "user/:id", element: <User /> }, // 新增这条动态路由
        // 其他注释的路由...
      ],
    },
    {
      path: "*",
      children: [
        { path: "404", element: <Page404 /> },
        { path: "*", element: <Navigate to="/404" replace /> },
      ],
    },
    { path: "*", element: <Navigate to="/404" replace /> },
  ]);
}

2. 优化User组件的逻辑 #

• 移除无用的withRouter（useParams已足够获取路由参数）
• 给useEffect添加依赖项id，确保参数变化时重新请求数据
• 增加基础错误处理，避免请求失败导致的异常

修改后的User.js代码：

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

const User = () => {
    const { id } = useParams();
    const [user, setUser] = useState({});

    useEffect(() => {
        async function fetchData() {
            try {
                const res = await axios(`https://jsonplaceholder.typicode.com/comments/${id}`);
                setUser(res.data);
            } catch (err) {
                console.error("获取详情数据失败:", err);
            }
        }
        if (id) fetchData();
    }, [id]);

    return (
        <div style={{ width: "80%", margin: "0 auto" }}>
            <div
                style={{
                    margin: "20px",
                    marginRight: "auto",
                    borderRadius: "20px",
                    border: "2px solid #000",
                    width: "50%",
                    padding: "10px",
                }}
            >
                <h1>Post Id : {user.postId ? user.postId : "Loading..."}</h1>
                {user.name && <p>名称: {user.name}</p>}
                {user.email && <p>邮箱: {user.email}</p>}
            </div>
        </div>
    );
};

export default User;

总结 #

1. 路由匹配失败的根本原因是缺失动态路由规则，补充后即可正常跳转
2. 优化组件依赖项和错误处理，能提升页面的稳定性和数据更新的准确性

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