使用useRoutes hook路由异常：子组件不渲染且/login报404

问题1：根路径下HomePage未渲染 #

父路由的AppLayout组件里缺少Outlet组件——React Router的嵌套子路由内容必须通过Outlet挂载到父路由的布局中，否则子路由元素根本没有渲染入口。

修复方法：在AppLayout中引入并渲染Outlet：

import { Outlet } from 'react-router-dom';

function AppLayout() {
  return (
    <div>
      {/* 你的布局内容（导航栏、侧边栏等） */}
      <Outlet /> {/* 子路由的元素会渲染到这个位置 */}
    </div>
  );
}

问题2：/login路径404且仅显示AppLayout #

这个问题有两个核心原因：

1. 子路由路径写法错误：父路由已经是/，子路由应该用相对路径"login"而非绝对路径"/login"，绝对路径会脱离父路由的嵌套关系，导致路由匹配异常。
2. 开发环境下BrowserRouter的刷新404问题：单页应用的非根路径刷新时，开发服务器会尝试直接请求对应的文件，找不到就返回404，需要配置服务器 fallback 到index.html。

修复步骤：

1. 修改routes.js中的子路由配置：

const routes: RouteObject[] = [
  {
    path: "/",
    element: <AppLayout />,
    children: [
      { path: "", element: <HomePage /> },
      { path: "login", element: <Login /> }, // 去掉路径前的斜杠，使用相对路径
    ],
  },
];

2. 解决刷新404问题：
   • 若使用Vite：在vite.config.js中添加server.fallback: 'index.html'
   • 若使用Create React App：安装serve包，然后在package.json中将启动脚本改为"serve": "serve -s build"；生产环境部署时（比如Nginx），需要配置将所有请求转发到index.html。

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