如何通过查询参数将上一个 React 路由传递到下一个路由

Question

如何将之前的location（路由）存储在常量中并通过查询参数传递？

我正在使用 React 路由器 v5。

在我的 React（路由）组件中，我有一个 Link

import { Link } from 'react-router-dom';

<Link to={{ pathname: MyPage, search: `?redirectUrl=previous-route` }}>
 Go to page
</Link>

我需要通过查询参数 redirectUrl.

将上一个位置路线传递到下一个路线 (MyPage)

<Link to={{ pathname: MyPage, search: `?redirectUrl=${<----- My previous route value here}` }}>
  Go to page
</Link>

我该如何管理？

Answer 1

使用 useLocation 挂钩获取当前位置作为下一页的先前位置。

import { Link, useLocation } from 'react-router-dom';

...

const { pathname } = useLocation();

...

<Link to={{ pathname: MyPage, search: `?redirectUrl=${pathname}` }}>
 Go to page
</Link>