Typescript 如何为特定参数定义子路由

如错误所示，您不能将绝对路径"/wizard/step1"嵌套在绝对路径"/wizard/:step"下.为了使动态路径段step对WizardLayout可用，那么您有几个选项.

1. 将子路由移到WizardLayout中的switch语句中，以取代Outlet.

   const router = createBrowserRouter([
     ...
     {
       path: '/wizard/:step',
       element: <WizardLayout />,
     },
     ...
   ]);
   

   const WizardLayout = () => {
     const { step } = useParams();
   
     const getStep = () => {
       switch(step) {
         case "step1":
           return <Step1Page />;
   
         case "step2":
           return <Step2Page />;
   
         default:
           return null;
       }
     }
   
     return (
       <>
         ... Wizard Layout UI ...
         {getStep()}
         ...
       </>
     )
   };
   

   

2. 更新路由声明，以便嵌套路由可以工作，并使用WizardLayout中的useMatch钩子来匹配"/wizard/:step"路径.

   const router = createBrowserRouter([
     ...
     {
       path: '/wizard',
       element: <WizardLayout />,
       children: [
         {
           path: 'step1',
           element: <Step1Page />,
         },
         {
           path: 'step2',
           element: <Step2Page />,
         },
       ],
     },
     ...
   ]);
   

   import { Outlet, useMatch } from 'react-router-dom';
   
   const WizardLayout = () => {
     const match = useMatch('/wizard/:step');
     const { step } = match?.params;
   
     return (
       <>
         ... Wizard Layout UI ...
         <Outlet />
         ...
       </>
     )
   };