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

Question

我有回电linkhttps://localhost:3000/callback?code=1234

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

所以我想要这样的东西：

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

我正在使用 react-router@6

Answer 1

您需要动态使用link。

<BrowserRouter>
  /* Links */
  {listofcodes.map(x=> (<Link to={'callback/' + x.code} />)}

  /* Component */
  <Route path="callback/:code" component={callback} />
</BrowserRouter>

class callbackextends Component {
  render() {
    return (
      <div>
        {this.props.match.params.code}
      </div>
    );
  }
}

Answer 2

您可以使用导航

import { useNavigate } from "react-router-dom";

let navigate = useNavigate();

 navigate({
  pathname: '/callback',
  search: `?code=${data}`,
});

然后使用useLocation从url获取代码。

const search = useLocation().search;
const id = new URLSearchParams(search).get("code");

有帮助link

Answer 3

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

示例：

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

动态部分在于您如何 link/navigate 到 "/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 参数。

对于URL "/callback?code=1234"

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

  ...
}

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

How to use dynamic routing in React router v6

reactjs

react-router