React Router嵌套路由场景下无法跳转至:customerId URL参数的问题

问题产生原因 #

1. 存在子路由的父路由未配置子路由渲染出口：React Router v6 嵌套路由规则要求，配置了children属性的父路由，对应的组件必须渲染Outlet组件作为子路由内容的挂载容器。你当前customers路由的组件没有添加Outlet，即使跳转URL匹配到了子路由，子路由内容也无法渲染，看起来就像跳转失败。
2. 代码存在转义语法错误：你代码片段中的<Link属于HTML转义后的内容，实际JSX中需要写为正常的<Link>标签才会被识别为路由跳转组件。

解决方法 #

1. 从react-router-dom导入Outlet组件
2. 在customers路由对应的组件中添加Outlet作为子路由出口
3. 修正Link标签的转义错误

修改后的完整代码如下：

import React from "react";
import { BrowserRouter, Link, RouteObject, useRoutes, Outlet } from "react-router-dom";

const contentRoutes: RouteObject[] = [
  {
    element: <div>Home Page</div>,
    index: true
  },
  {
    element: (
      <div>
        <div>Customers <Link to="microsoft">Microsoft</Link> (修改后可正常跳转)</div>
        {/* 子路由渲染出口 */}
        <Outlet />
      </div>
    ),
    path: "customers",
    children: [
      {
        path: ":customerId",
        element: <div>Customer Microsoft</div>
      }
    ]
  }
];

const Content: React.FC = () => {
  const content = useRoutes(contentRoutes);
  return <div style={{ display: "flex" }}>{content}</div>;
};

export default function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <div style={{ display: "flex", gap: "10px", marginBottom: '20px' }}>
          <Link to="/">Home</Link>
          <Link to="customers">Customers</Link>
        </div>
        <Content />
      </div>
    </BrowserRouter>
  );
}

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