React Router路由问题：可选参数后无法匹配静态路由段

你的问题出在父路由使用可选参数导致的贪婪匹配：/customers/:customerId? 会把 /customers/15/contacts 中的 15/contacts 整体识别为 customerId 的值，因此父路由直接匹配成功，不会触发子路由。

正确的做法是拆分路由结构，避免用可选参数覆盖子路由的路径匹配：

const router = createBrowserRouter([
    {
        path: '/',
        element: <SomeRoot />,
        children: [
            // 匹配 /customers，渲染空的Customer组件
            {
                path: 'customers',
                element: <Customer />,
                loader: () => null // 空路由无需加载数据，可根据实际情况调整
            },
            // 匹配 /customers/:customerId，加载指定客户
            {
                path: 'customers/:customerId',
                element: <Customer />,
                loader: customerLoader,
                children: [
                    // 匹配 /customers/:customerId/contacts，加载客户联系人
                    {
                        path: 'contacts',
                        element: <CustomerContacts />,
                        loader: contactLoader
                    }
                ]
            }
        ]
    }
]);

关键说明： #

• 把 /customers 和 /customers/:customerId 拆分为两个独立路由，彻底避免可选参数的模糊匹配问题。
• 子路由 contacts 挂在 /customers/:customerId 下，只有当路径匹配到带ID的父路由时，才会触发子路由渲染。
• 两个路由复用 <Customer /> 组件时，可在组件内部通过 useParams() 判断是否存在 customerId，以此区分渲染空状态还是客户详情。

如果想复用父路由的公共配置（比如错误边界、布局），可以抽离公共路由对象：

const customerBaseConfig = {
    element: <Customer />,
    // 可添加errorElement等公共配置
};

const router = createBrowserRouter([
    {
        path: '/',
        element: <SomeRoot />,
        children: [
            {
                ...customerBaseConfig,
                path: 'customers',
                loader: () => null
            },
            {
                ...customerBaseConfig,
                path: 'customers/:customerId',
                loader: customerLoader,
                children: [
                    {
                        path: 'contacts',
                        element: <CustomerContacts />,
                        loader: contactLoader
                    }
                ]
            }
        ]
    }
]);

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