react-router v6 动态路径联合

Question

在react-router v5中，我能够通过以下方式指定一组特定的动态路径属性： '/some-path/:someDynamicProperty(value1|value2|value3)' 因此，这条路径唯一现有的选项是：

• /some-path/value1
• /some-path/value2
• /some-path/value3

任何其他路径（如 /some-path/value1124）将被视为未知路径并被 * 路径捕获

react-router v6 有其他替代方案吗？

我已经检查了文档，但实际上没有发现任何相关内容

Answer 1

React-Router v6 删除了路径正则表达式。如果您想限制可匹配的路线，那么您有几个选择。

1. 显式渲染您想要渲染的路线。您可以将动态路径段值的数组映射到离散路线。

   <Routes>
     ....
     {["value1", "value2", "value3"].map((someDynamicProperty) => (
       <Route
         key={someDynamicProperty}
         path={generatePath("/some-path/:someDynamicProperty", {
           someDynamicProperty
         })}
         element={<MyComponent />}
       />
     ))}
     ...
     <Route path="/404" element={<NotFound />} />
     <Route path="*" element={<Navigate to="/404" replace />} />
   </Routes>
   

2. 使用与任何内容匹配的动态路径段并在组件中执行检查，如果不是有效的路径段则进行重定向。

   <Routes>
     <Route
       path="/some-segment/:someDynamicProperty"
       element={<MyComponent />}
     />
     <Route path="/404" element={<NotFound />} />
     <Route path="*" element={<Navigate to="/404" replace />} />
   </Routes>
   

   const MyComponent = () => {
     const { someDynamicProperty } = useParams();
     const match = /(value1|value2|value3)/.test(someDynamicProperty);
   
     if (!match) return <Navigate to="/404" replace />;
   
     return (
       ....
     );
   };