如何在React router v6中使用动态路由

Question

我有回调链接https://localhost:3000/callback?code=1234

如何为代码提​​供动态路由？您不能将 替换"?"为"/"。

所以我想要这样的东西：

<Route path="callback?{dynamic data here}" element={Component } />

我在用着react-router@6

Answer 1

使用 URL 的路径部分来匹配和呈现路由时，不考虑 URL 的 queryString 部分。路由应该只指定它需要匹配的路径，然后路由组件需要读取它需要的queryString参数。

例子：

<Route path="/callback" element={<Component />} />

动态部分在于您如何链接/导航到"/callback"路线。

• 使用Link组件

   <Link
     to={{
       pathname: "/callback",
       search: `?code=${code}`, // inject code value into template
     }}
   >
     Code
   </Link>
  

• 使用Navigate组件

   <Navigate
     to={{
       pathname: "/callback",
       search: `?code=${code}`, // inject code value into template
     }}
   />
  

• 使用navigate功能

   navigate({
     pathname: "/callback",
     search: `?code=${code}`, // inject code value into template
   });
  

应该Component使用useSearchParams挂钩来访问 queryString 参数。

对于网址"/callback?code=1234"

const Component = () => {
  const [searchParams] = useSearchParams();
  const code = searchParams.get("code"); // "1234"

  ...
}