React Router Dom 无法从编辑组件跳转至ListCertificate页面问题求助

根因说明 #

return (<Redirect>属于声明式路由组件，仅在组件的渲染函数上下文中返回时才会被路由系统识别处理。你在异步请求的`then`回调函数中返回该JSX，不在组件的渲染流程内，路由系统无法捕获到这段返回值，因此跳转不生效。
你的路由配置本身没有问题，可直接通过路径访问页面也验证了这一点。

---

## 解决方案
根据你使用的React Router版本选择对应方案即可：

### 方案1：React Router v5版本
#### 方法A：使用history编程式跳转
如果你的编辑组件是直接被Route组件渲染的，props自带`history`对象，直接调用`push`方法即可：
```ts
.then(function (response: any) {
  console.log(response);
  toast("🦄 Record updated successfully", {
    position: "top-right",
    autoClose: 2000,
    hideProgressBar: false,
    closeOnClick: true,
    pauseOnHover: true,
    draggable: true,
    progress: undefined
  });
  // 替换原来的Redirect代码行
  props.history.push('/listcertificate');
})
```
如果编辑组件不是直接被Route渲染，无法直接拿到history，使用`withRouter`高阶组件包裹组件即可：
```js
import { withRouter } from 'react-router-dom';

// 原有编辑组件定义
class EditCertificate extends React.Component {
  // 组件逻辑
}

// 导出时包裹
export default withRouter(EditCertificate);
```

#### 方法B：状态控制声明式跳转
在组件中添加跳转控制状态，提交成功后修改状态触发渲染时返回Redirect：
```ts
// 组件state定义
state = {
  shouldRedirect: false
}

// then回调中修改状态
.then((response: any) => {
  // 原有toast等逻辑
  this.setState({ shouldRedirect: true })
})

// 组件render方法顶部添加判断
render() {
  if (this.state.shouldRedirect) {
    return <Redirect to='/listcertificate' />
)

}
// 原有渲染逻辑
}

---

### 方案2：React Router v6版本
v6版本已移除Redirect组件和withRouter高阶组件，使用`useNavigate`钩子实现编程式跳转即可：
```ts
import { useNavigate } from 'react-router-dom';

function EditCertificate() {
  const navigate = useNavigate();

  // 提交逻辑
  const submitHandle = () => {
    // 原有请求逻辑
    .then((response: any) => {
      // 原有toast等逻辑
      navigate('/listcertificate');
    })
  }
  // 组件其余逻辑
}

额外注意事项 #

路由配置中component={Listcertificate}的组件名大小写需要和你实际导入的ListCertificate组件保持一致，避免本地开发环境大小写不敏感，上线后出现404问题。
toast提示中的successflly为拼写错误，可修改为successfully。

内容的提问来源于stack exchange，提问作者Shruti sharma