React JS使用react-router-dom跳转页面不丢失已填内容的问题咨询

根本原因 #

你当前使用Route的component属性指定渲染组件时，每次路由匹配到对应路径都会卸载旧组件、重新挂载新实例，所以Home组件里的表单state、用户输入内容都会随着组件卸载被清空，返回时重新挂载自然恢复初始空状态。

可行解决方案 #

方案1：使用缓存路由（改动最小，推荐） #

配合react-router-cache-route库实现组件缓存，跳转时不会卸载组件，自然保留所有输入状态，适配你当前使用的react-router-dom v5版本：

1. 安装依赖

npm install react-router-cache-route --save

2. 修改路由配置

import { Route, HashRouter as Router } from "react-router-dom";
import CacheRoute, { CacheSwitch } from 'react-router-cache-route';

<Router>
  <CacheSwitch>
    {/* 需要缓存的Home页用CacheRoute，指定唯一cacheKey */}
    <CacheRoute path="/home" exact component={Home} cacheKey="home" />
    <Route path="/hello-world" exact component={HellWorld} />
  </CacheSwitch>
</Router>

修改后跳转至其他页面时Home组件不会被卸载，返回时直接读取缓存实例，所有输入内容都会保留。

方案2：本地存储持久化（无额外依赖） #

如果不想引入第三方库，可以把表单数据实时同步到sessionStorage/localStorage，组件挂载时再读取恢复：

// Home组件核心逻辑示例
class Home extends React.Component {
  state = {
    formData: {
      // 你的所有表单项初始值
      username: '',
      contact: ''
    }
  }

  componentDidMount() {
    // 组件挂载时读取已存储的表单数据
    const saved = sessionStorage.getItem('home_form');
    saved && this.setState({ formData: JSON.parse(saved) });
  }

  handleInputChange = (e) => {
    const { name, value } = e.target;
    const newForm = { ...this.state.formData, [name]: value };
    this.setState({ formData: newForm });
    // 输入变更时同步更新到本地存储
    sessionStorage.setItem('home_form', JSON.stringify(newForm));
  }

  handleSubmit = () => {
    // 表单提交成功后清除存储，避免下次进入页面残留旧数据
    sessionStorage.removeItem('home_form');
    // 后续提交逻辑
  }
}

该方案优势是就算刷新页面，表单内容也不会丢失。

方案3：状态提升到公共父组件 #

将Home页的表单状态提到Router外层的公共父组件中，路由切换时父组件不会卸载，状态自然保留：

// 外层App组件示例
class App extends React.Component {
  // 存储Home页表单数据
  state = { homeForm: {} }

  updateHomeForm = (newForm) => {
    this.setState({ homeForm: newForm });
  }

  render() {
    return (
      <Router>
        <Switch>
          <Route
            path="/home"
            exact
            render={(props) => (
              <Home
                {...props}
                formData={this.state.homeForm}
                updateForm={this.updateHomeForm}
              />
            )}
          />
          <Route path="/hello-world" exact component={HellWorld} />
        </Switch>
      </Router>
    )
  }
}

Home组件内直接使用props传入的formData作为表单值，输入变更时调用updateForm方法更新父组件状态即可。

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