从react路由器dom路由中删除/补充尾随字符

Question

我有一个路由：/:question/:id

我想要的是，如果放入/:questionName/:idnonsense，废话会自动删除。

假设/how_to_do_that/123是可用的路由，如果在地址栏中输入/how_to_do_that/123345345345或/how_to_do_that/123awheofhawoeiha，它将自动修改为/how_to_do_that/123。或者如果我放/how_to_do_that/12，它会补充到/how_to_do_that/123。并重定向到/how_to_do_that/123

我怎么能做到这一点？我在React中使用Routes。我试了一整天的时间…

我在youtube上试过，他们的路线可以做到。所以https://www.youtube.com/watch?v=1fPWr0d5zBE是一个可用的链接，如果您尝试访问https://www.youtube.com/watch?v=1fPWr0d5zBEAHSOHOWIHFOH，将修改为https://www.youtube.com/watch?v=1fPWr0d5zBE并访问该链接。但如果你想去https://www.youtube.com/watch?v=1fPWr0d5z，这是一个404(我认为可以通过匹配接近的猜测来改进(。

有人知道怎么做吗？非常感谢。

Answer 1

好吧，你的youtube示例与你在问题中所要求的不匹配(路由路径params与queryString params(，但我认为答案都是一样的。您要验证路由路径参数。使用正则表达式在组件中处理此问题。

const regexp123 = /^123$/;
console.log(regexp123.test("123345345345"));
console.log(regexp123.test("123"));
console.log(regexp123.test("12"));

在组件中，逻辑可能如下所示：

import { generatePath, useParams, useNaviate } from 'react-router-dom';
const regexp123 = /^123$/;
const params = useParams();
const navigate = useNavigate();
useEffect(() => {
const { id } = params;
if (!regexp123.test(id)) {
const target = generatePath(
"/:question/:id",
{
...params,
id: '123',
},
);
navigate(target, { replace: true });
}
}, [navigate, params]);

要点是组件需要手动验证路径参数并进行相应的处理。使用useSearchParams钩子的queryString参数也是如此。