拿到Express返回结果后如何在React中实现页面重定向？

• <Redirect> 是React Router提供的JSX组件，只有在组件的渲染返回结果中被返回时才会生效，你直接在事件回调函数里写JSX不会被渲染，自然不会触发跳转。
• fetch是异步API，你标注的2、3位置的代码会在fetch请求发出后立刻执行，此时接口还没有返回结果，webData 还是初始的undefined，逻辑永远不会生效。另外你用普通变量存接口数据，就算赋值成功也不会触发React组件重渲染，不符合React的状态管理规范。

首先明确你使用的React Router版本，对应选择实现方式：

方案1：编程式导航（推荐，适用于事件回调场景） #

如果你用的是React Router v5 #

1. 在组件头部引入useHistory钩子：

import { useHistory } from 'react-router-dom'

2. 在函数组件内部声明history实例：

const history = useHistory()

3. 修改handleSubmit代码，拿到数据后调用跳转方法，同时可以把接口返回的数据传给目标页：

function handleSubmit(e) {
  e.preventDefault();
  fetch("/getResults", 
    {
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      method: "post",
      body: JSON.stringify(FormInfo)
    })
    .then((res) => res.json())
    .then((data) => {
      console.log(data);
      // 跳转并传参
      history.push('/resultpage', { webData: data })
    })
    .catch(err => {
      console.error(err);
      // 建议补充错误提示逻辑，避免用户无感知
    });
}

4. 目标页面可以通过useLocation钩子拿到传递的数据：

import { useLocation } from 'react-router-dom'

// 组件内部
const { state } = useLocation()
const webData = state?.webData // 就是你接口拿到的数据

如果你用的是React Router v6 #

v6移除了useHistory，替换为useNavigate，用法大同小异：

1. 引入钩子：

import { useNavigate } from 'react-router-dom'

2. 声明实例：

const navigate = useNavigate()

3. 跳转代码替换为：

navigate('/resultpage', { state: { webData: data } })

方案2：用组件实现 #

如果你希望用组件方式跳转，需要配合状态变量实现：

1. 声明两个状态变量：

import { Redirect } from 'react-router-dom'
import { useState } from 'react'

// 组件内部
const [shouldRedirect, setShouldRedirect] = useState(false)
const [resultData, setResultData] = useState(null)

2. 接口拿到数据后更新状态：

.then((data) => {
  console.log(data);
  setResultData(data)
  setShouldRedirect(true)
})

3. 在组件的渲染返回逻辑里判断跳转：

if (shouldRedirect) {
  return <Redirect to={{
    pathname: '/resultpage',
    state: { webData: resultData }
  }} />
}
// 否则返回原来的表单页面内容
return (
  // 你的原有表单代码
)

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