reactjs - 如何使用 react 路由器将 url 参数限制为一组特定的值？

Question

我正在使用 react router v6 来定义这样的路由。

<Routes>  
  <Route path="*" element={<Navigate to="/" />} />
  <Route path="/" element={<HomePage />} />
  <Route path="/shop">
    <Route index element={<ShopPage />} />
    <Route path=":category" element={<CategoryPage />} />
  </Route>
</Routes>

这是导航到“/shop/:category”的 ShopPage 代码

const categories = ['shoes', 'jeans', 'sweaters']; // originally populated using an api 
{categories.map(category => <Link to=`/shop/${category}`>${category}</Link>}

我想限制导航到 CategoryPage 仅当类别参数具有上述定义集中的值时。我目前正在做的是根据收到的类别参数有条件地在 CategoryPage 上呈现内容。

例如，如果用户导航到“/shop/xyz”，我只会显示“未找到”错误和返回商店的链接。不过，我想要的是以某种方式预先检查目标路径，并且在这种情况下根本不移动到 CategoryPage。

我试着做类似的事情

 <Route path=":category('shoes'|'jeans'|'sweaters')" element={<CategoryPage />} />

如本 post 所述但这只是将我重定向到所有参数值的根路径“/”。

有办法吗？

Answer 1

正则表达式已从 react-router-dom@6 中的路由路径中移除。参见 "What Happened to Regexp Routes Paths?"了解详情。

你有几个选择:

1. 显式呈现您要匹配的路线。为此，您以与链接相同的方式映射类别。

   <Routes>  
     <Route path="*" element={<Navigate to="/" />} />
     <Route path="/" element={<HomePage />} />
     <Route path="/shop">
       <Route index element={<ShopPage />} />
       {categories.map(category => (
         <Route
           key={category}
           path={category} // <-- "/shop/shoes", "/shop/jeans", "/shop/sweaters"
           element={<CategoryPage />}
         />
       ))}
     </Route>
   </Routes>
   

2. 验证匹配组件中的 category 路由路径参数。我建议创建一个类别包装器组件，该组件读取并验证 category 路径参数，并在类别无效时将用户从路由中弹回。

   import { Navigate, useParams } from 'react-router-dom';
   
   const CategoryWrapper = ({ categories = [], children }) => {
     const { category } = useParams();
   
     const isValid = !categories.length || categories.includes(category);
   
     return isValid ? children : <Navigate to="/" replace />;
   };
   

   <Routes>  
     <Route path="*" element={<Navigate to="/" />} />
     <Route path="/" element={<HomePage />} />
     <Route path="/shop">
       <Route index element={<ShopPage />} />
       <Route
         path=":category"
         element={(
           <CategoryWrapper categories={categories}>
             <CategoryPage />
           <CategoryWrapper>
         )}
       />
     </Route>
   </Routes>