React-router-dom v6 参数

Question

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

目前我正在尝试：

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

使用“http://localhost:3000/registration?code=testCode”的 url，我得到错误：

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"

Answer 2

注册后放“/”

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