Reactjs Reaction路由v6动态路径RegExp

发布于01月28日

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

/some-path/value1个
/some-path/value2
/some-path/value3个

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

Reaction路由V6中是否有其他 Select ？

我查了documentation，但实际上什么也没找到

推荐答案

Reaction-路由V6删除了路径正则表达式.你可以在"What Happened to Regexp Routes Paths?"阅读更多关于它的内容.

如果您想限制匹配的路由，那么您有几个 Select .

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

<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>

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

<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 (
    ....
  );
};