React-router-dom v6 参数

Question

如何使用react-router-dom v6在react中创建路由？

目前我正在尝试：

<Route path="/registration:id" element={<Registration />} />

当 url 为“http://localhost:3000/registration?code=testCode”时，我收到错误：

No routes matched location "/registration?code=testCode

我尝试过以多种不同的方式操作路由路径，唯一有效的方法是路径没有查询部分“：id”。

这是 v6 的新语法还是我做错了什么？

Answer 1

React-router-dom 通常只处理URL 的路径部分，而不处理查询字符串，并且在 RRDv6 中，存在一个useSearchParams钩子，您可以使用它来访问查询字符串参数。不过，您不会指定任何路径匹配参数，因为这应该用于匹配URL 的路径部分。

鉴于：

• 小路"/registration?code=testCode"
• <Route path="/registration" element={<Registration />} />

例子：

const [searchParams] = useSearchParams();
const code = searchParams.get('code'); // "testCode"