访问localhost:3000/chunk出现404，路由匹配失败求助

核心问题1：无/chunk基础路由配置 #

你当前路由仅定义了带ID参数的/chunk/:id规则，但直接访问/chunk时没有对应路由匹配，因此触发404错误。

核心问题2：Layout未渲染子路由内容 #

你的Layout组件里缺少<Outlet />标签，即便子路由匹配成功，对应的Home、Chunk组件也无法在Layout中显示。

额外问题：QueryClient创建位置不合理 #

在App组件内部每次渲染都会新建QueryClient实例，会导致React Query缓存失效、重复请求等问题，需移到组件外部或用useMemo缓存。

修复后代码示例 #

// 将QueryClient移到组件外部，避免重复创建
const queryClient = new QueryClient();

function App() {
  const { currentUser } = useContext(AuthContext);

  const Layout = () => {
    return (
      <QueryClientProvider client={queryClient}>
        <div className="page">
          Layout
          {/* 添加Outlet用于渲染子路由组件 */}
          <Outlet />
        </div>
      </QueryClientProvider>
    );
  };

  const ProtectedRoute = ({ children }) => {
    if (!currentUser) {
      return <Navigate to="/login" />;
    }
    return children;
  };

  const router = createBrowserRouter([
    {
      path: "/",
      element: (
        <ProtectedRoute>
          <Layout />
        </ProtectedRoute>
      ),
      children: [
        {
          path: "/",
          element: <Home />,
        },
        // 添加/chunk基础路由（若需访问该路径）
        {
          path: "/chunk",
          element: <ChunkList />, // 可替换为你的列表组件或其他内容
        },
        {
          path: "/chunk/:id",
          element: <Chunk />,
        },
      ],
    },
    {
      path: "/login",
      element: <Login />,
    },
    {
      path: "/register",
      element: <Register />,
    },
    // 可选：添加404兜底路由
    {
      path: "*",
      element: <NotFound />, // 自定义404组件
    }
  ]);
  
  return (
    <div>
      <RouterProvider router={router} />
    </div>
  );
}

export default App;

补充说明 #

• 若不需要单独访问/chunk路径，仅需确保日常访问带ID的/chunk/xxx即可，但添加404兜底路由能优化用户误操作的体验。

内容的提问来源于stack exchange，提问作者Lama Dev Student