VS2019中使用.NET Core 3.1 React模板时<Redirect>跳转失效如何解决？

核心原因 #

Visual Studio 2019 的 .NET Core 3.1 React 项目模板默认集成 react-router v6 及以上版本，该版本已正式移除 Redirect 组件，旧版本写法无法正常运行。

适配解决方案 #

1. 组件内直接跳转 #

替换原有 Redirect 写法为 v6 提供的 Navigate 组件即可，代码如下：

// 首先引入Navigate组件
import { Navigate } from 'react-router-dom';

// 原有return <Redirect to='/login' />的位置替换为：
return <Navigate to='/login' replace />

replace属性可实现和原Redirect一致的效果，避免用户点击浏览器后退按钮回到跳转前页面

2. 路由表配置重定向 #

如果是在全局路由规则中配置重定向，调整写法如下：

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

const routerConfig = [
  // 其他路由配置项
  {
    path: '/需要重定向的旧路径',
    element: <Navigate to='/login' replace />
  }
]

兼容react-router v5的排查方案 #

如果你确认项目已降级为 react-router v5 仍不生效，请检查两项配置：

• 调用Redirect的组件必须包裹在Router组件的上下文范围内，否则路由能力无法正常生效
• 确认路由规则中已正确注册/login路径，未注册的路径会触发404而非跳转

验证操作步骤 #

修改完成后按以下步骤重启服务验证：

• 进入项目根目录下的ClientApp文件夹
• 执行npm install确保依赖完整
• 执行npm start启动前端调试服务，测试跳转逻辑即可

内容的提问来源于stack exchange，提问作者Dilan Fernando