前言
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中同样的方法实现
总结
以上是我的解决办法,如果有错误或者描述不当的地方,欢迎大家批评指正,谢谢
本文介绍了在React应用中,特别是antdesignpro项目中遇到的重定向限制,并提供了一种使用Route组件替代Redirect组件来实现跨域重定向的有效解决方案。
4378

被折叠的 条评论
为什么被折叠?



