前言
react重定向,网络上大多是介绍Redirect的使用,然而本人使用过后,发现Redirect似乎有一些限制:
(1)不能改变重定向地址的域名,比如下方的:
a.test.com => b.test.com
(2)在ant design pro 这种工程中,如果限定了前缀路径,则重定向时Redirect甚至不能更改前缀,比如下方这种固定了前缀为 /user
的url,Redirect添加了 to="/login"
,则重定向后,url会变成如下的样子:
a.test.com/user/ => a.test.com/user/login
而不是我期望的
a.test.com/user/ => a.test.com/login
那应该如何才能跳转到期望的地址呢?
以下是我在ant design pro中解决的方法
原地址为 http://a.test.com/per
目标地址为 http://b.test.com/login
把原来用Redirect
的地方
import { Redirect } from 'umi';
<Redirect to={`/login`} />;
改成如下形式
import { Route } from 'umi';
const REDIRECT_URL = 'http://b.test.com/login';
<Route component={() => { window.location.href = `${REDIRECT_URL}`; return null;} }/>;
如果你不是在 ant design pro 中遇到此问题,也可以直接使用 react-router
中同样的方法实现
总结
以上是我的解决办法,如果有错误或者描述不当的地方,欢迎大家批评指正,谢谢