React Router 升级 v6: Redirect 重定向替代方案

React Router v6 Redirect 更新

React Router 的第六版做了许多破坏性的更新，其中一个就是将 <Redirect> 组件移除了。本篇就来介绍一下几个 Redirect 的替代方案

官方推荐方案 1: 使用 Navigate 组件替代

简而言之：直接使用 Navigate 替换原来的 Redirect 组件

• in v5

<Route path="about" render={() => <Redirect to="about-us" />} />

• in v6

// in v6
<Route path="*" element={<Navigate to="/" replace />} />

官方推荐方案 2: 自定义 Redirect 组件

更进一步，我们来看一下源码

• 传送门：Navigate 源码

我们可以看到核心代码其实就是一个 useNavigate 加上一个 useEffect。官方也告诉我们可以仿照 Navigate 组件自己重新实现一个

const Redirect: FC<RedirectProps> = ({ to }) => {
  const navigate = useNavigate();

  useEffect(() => {
    navigate(to, { replace: true });
  });

  return null;
};

// ...

<Route path="*" element={<Redirect to="/" />} />

自定义 Redirect 示例: 防止异常跳转并上报

当然 react router 官方的初衷实际上是希望用户能够更优雅的处理重定向的问题，而不是各种异常境况重定向就完事。因此合并跳转和定向的方法，合成了新的 useNavigate 钩子，让我们能在如上自定义组件内对重定向行为有更详细的描述

下面我们提供一个扩张自定义重定向组件的示例，拒绝非法重定向并向控制台上报错误信息

const Redirect: FC<RedirectProps> = ({ to }) => {
  const navigate = useNavigate();

  useEffect(() => {
    navigate(-1);
    console.error('Bad route');
  });

  return null;
};

我们使用 navigate(-1) 的方式来回到跳转到异常路由前的页面并打印一个错误信息

完整代码示例

https://github.com/superfreeeee/Blog-code/tree/main/front_end/react/react_router_v6_redirect

参考连接

配置 vue_router 时, 很经常就用到重定向(redirect)功能
例如:
没登录重定向到登录页面(导航卫士拦截也是高效的登录检查方法)
index, home, house 重定向到首页等

重定向 redirect 可接受的值

字符串

字符串作为 path 传入, 相当于 { path: redirect }

{
	...
	redirect: "/assets/assetsIndex",
	...
}
// 相当于
{
	...
	redirect: { path: '/assets/assetsIndex' },
	...
}

对象

先判断有没有 name
有 name
发起跳转处提供的 name, query, hash, params 会往下传
如果 redirect 也提供了这些属性则用 redirect 提供的往下传

redirect: {
	name: 'assetsIndex',
	params: { id: 'redirect' },
}
// redirect 提供了 params, 目标组件可以收到该 params 数据
// redirect 没有提供, 目标组件收到发起跳转处的数据(发起跳转是有数据的话)

没有 name, 就找 path
计算后的 path 和 query, hash 会往下传
如果 redirect 也提供了这些属性则用 redirect 提供的往下传

redirect: {
	path: 'assetsIndex',
	query: { id: 'redirect' },
}

方法

方法必须 return 一个字符串
return 的内容最终作为 path 往下传
所以提供的 params 将无效

redirect: function (to) {
	return 'assetsIndex'
}

这些不需要传参的情况, 直接设置为目标地址的字符串就可以

{
	path: "/assets",
	component: layout,
	redirect: "/assets/assetsIndex",
}

如果你遇到的需求需要传值的话, 可以参考下面的方法

query 带参跳转

query 直接带参就可以了, 缺点是地址中会暴露参数

// 发起跳转
this.$router.push({ name: 'assets', query: { val: 'val值' } })
/* or */
this.$router.push({ path: '/assets', query: { id: '编程式_id' } })
/* or */
this.$router.push("/assets?id=编程式_id")

// 重定向
{
	path: "/assets",
	name: "assets",
	redirect: "/assetsHome",
}

// 目标路由
{
	path: "/assetsHome",
	component: assetsHome,
},

// 目标组件中取值
this.$route.query

params 带参跳转

params 带参相对麻烦, 因为"如果提供了 path，params 会被忽略"在 redirect 中也是成立的
所以我们可以知道, 不可以用 path 来设置路由
而 params 带参的好处当然就是可以在地址隐藏参数了

// 发起跳转
this.$router.push({ name: 'assets', params: { id: '编程式_id' } })

// 重定向
{
	path: "/assets",
	name: "assets",
	redirect: { name: 'assetsHome' },
}

// 目标路由
{
	path: "/assetsHome",
	name: "assetsHome",
	component: assetsHome,
}

// 目标组件中取值
this.$route.params

动态路径带参跳转

本来是不想写这个方法的, 因为笔者本来就很讨厌动态路径带参, 觉得那个方法局限性太大, 加一个参数很麻烦, 还要顺序要求
为了不要被读者吐槽我懒(敲代码本来就是为了偷懒嘛), 还是稍微写一下

// 发起跳转
this.$router.push({ path: '/assets/编程式_id' })

// 重定向
{
	path: "/assets/:id",
	name: "assets",
	redirect: { name: 'assetsHome' },
}

// 目标路由
{
	path: "/assetsHome/:id",
	name: "assetsHome",
	component: assetsHome,
}

// 目标组件中取值
this.$route.params

[题外话] 重定向和别名的区别

重定向是进入 a, 然后自动跳转到 b
a 和 b 都是真实的路由地址, 这个过程经过两地址, 只是 a 不会被记录

别名是进入 a, 实际上是进入 b
a 不是真实的路由地址, 这个过程自始至终都只是在 b 地址

end

1.forward 和redirect

forward又叫转发，表示转发，当请求来到时，可以将请求转发到其他的指定服务，用户端不知晓。

redirect又叫重定向，表示转发，当请求发给A服务时，服务A返回重定向给客户端，客户端再去请求B服务。

2.使用forward注意事项

1.转发和被转发的请求类型必须一致，即全是GET或者POST

2.转发者方法不能被标识位@RestController或者@ResponseBody

3.使用redirect注意事项

1.redirect不支持post请求

2.redirect需要携带请求参数，需要在url地址中进行编码防止中文乱码。

4.两者的区别

1.从地址栏显示来说：

​forword是服务器内部的重定向，服务器直接访问目标地址的 url网址，把里面的东西读取出来，但是客户端 并不知道，因此用forward的话，客户端浏览器的网址是不会发生变化的。
​redirect是服务器根据逻辑，发送一个状态码，告诉浏览器重新去请求那个地址，所以地址栏显示的是新的地址。

2.从数据共享来说：

​由于在整个定向的过程中用的是同一个request，因此forward会将request的信息带到被重定向的jsp或者 servlet中使用。即可以共享数据
​redirect不能共享

3.从运用的地方来说

​forword 一般用于用户登录的时候，根据角色转发到相应的模块
​redirect一般用于用户注销登录时返回主页面或者跳转到 其他网站

4.从效率来说：

​forword效率高，而redirect效率低

5.从本质来说：

​forword转发是服务器上的行为，而redirect重定向是客户端的行为

6.从请求的次数来说：

​forword只有一次请求；而redirect有两次请求，