我有一个注册/登录页面，我想将用户重定向到他们在尝试注册/登录之前在网站上访问的最后一个页面(或者他们的个人资料，如果来自另一个域(。我的代码基本上看起来像这样：
指向页面的链接
<Link to="/signup">Sign up</Link>
页面本身
export default function SignupPage(input){
//code for signing in/up
}
我的问题是我不确定如何将以前的路径名传递给注册页面。链接似乎传递了自己的预定数据，我已经考虑使用 goBack 函数，但如果用户来自不同的域，我将无法重定向到配置文件。有什么方法可以在不将注册页面更改为类的情况下使用？在想可能有办法用钩子，但我不确定。
链接按钮
<Link to="cityPage" state={{ city: "Paris" }}>
Go City Page
</Link>
功能组件
import { useLocation } from 'react-router-dom'
function CityPage () {
const location = useLocation()
const { city } = location.state
return (
<div>
City is {city}
</div>
)
输出：城市是巴黎
执行此操作的标准方法是在将用户重定向到登录页面之前使用查询参数捕获用户的预期目标，以便在他们登录后将他们发送到其预期目标。
如果您使用的是react-router，则可以从history对象获取当前位置，这可以通过 Hook 或 HOC 获取。 如果您使用的是其他路由库，则它可能具有获取history的文档。
通常，这是通过<Redirect to={signUpPath}/>完成的，但您也可以将相同的概念应用于<Link ...>。
从history或window对象中获取所需的位置，并构建如下所示的链接：
const redirectPath = ...; //capture/build the path of where to return the user to
<Link to={"/signup?redirectTo={redirectPath}"}>Sign up</Link>
在注册页面中，您将从当前 url 中获取redirectTo查询参数(如果您使用的是react-router，则通过history.location.search
//getReturnUrl would just pull the url from the search string. you could also use window.location
const destination = getReturnUrl(history.location.search);
history.replace(destination);
然后在用户登录后将用户发送到那里。 如果没有重定向路径，则它们可能不是来自您的应用，因此只需将它们发送到默认视图即可。
注意：使用history.replace()而不是更常见的history.push()可以防止注册页面显示在用户的后退堆栈中。
您可以使用链接传递状态：
<Link
to={
pathname: "/signup",
state: {
referrer: history.location, // save the current location and pass with route push
}
}
>
Sign up
</Link>
然后在组件中从历史记录对象中解压缩位置状态：
- 如果作为渲染道具
const referrer = props.history.location.state.referrer;传递 - 如果嵌套
const { location: { state: { referrer } } = useHistory();则使用钩子
然后渲染Redirect或history.replace，将用户重定向回他们来自的位置
<Redirect to={referrer} />history.replace({ pathname: referrer });
我创建了一个实用程序函数来处理并从history对象返回引用器。
const getReferrer = history =>
(history.location &&
history.location.state &&
history.location.state.referrer) ||
'/'; // return home if no referrer