React-router-dom v6 参数仅数字

Question

我想在react-router-dom v6 的可能参数中添加数字正则表达式。它在 v5 中工作得像这样：

 <Route path="list/:id(\d+)" element={<MyComponent/>} /> 

但它在 v6 中不起作用。

Answer 1

不支持正则表达式react-router-dom@6。

查看正则表达式路由路径发生了什么？

正则表达式路由路径被删除有两个原因：

1. 路由中的正则表达式路径对 v6 的排名路由匹配提出了很多问题。如何对正则表达式进行排名？

2. 我们能够摆脱整个依赖关系（正则表达式的路径）并显着减少发送到用户浏览器的包重量。如果加回来，它将代表 React Router 页面权重的 1/3！

您可以使用useParams钩子并测试id组件中的参数。

例子：

import { useParams, useNavigate } from 'react-router-dom';

const MyComponent = () => {
  const { id } = useParams();
  const navigate = useNavigate();

  useEffect(() => {
    if (!/\d+/.test(id)) {
      navigate(-1);
    }
  }, [id, navigate]);

  ...
};