React刷新页面后停留在当前表格的实现方案求助

我的应用包含三个表格：Branches、Services和Guichets，同一时间仅展示其中一个。我通过初始值为Branches的context状态控制表格的显示逻辑，状态变化时用switch语句切换渲染对应的表格。

目前遇到的问题是：向Services表格添加新行后，必须刷新页面才能看到新数据，但调用window.location.reload(false)刷新后，页面会自动切回Branches表格，得手动切换回Services才能查看新添加的行。因为项目进度限制，不能引入React Router，想请教怎么在刷新后保持当前的context状态，停留在原来的表格。

现有代码示例 #

组件构造函数 #

constructor(){
    super()
    this.state = {
        Branches: [],
        Services: [],
        Guichets: [],
        context: "Branches",
        Branche: '',
        isHidden: true
    }
}

添加Service的提交方法 #

OnSubmitService = () => {
  fetch("http://localhost:3000/AddService", {
    method: "post",
    headers: {"Content-Type": "application/json"},
    body: JSON.stringify({
      REFService: this.state.REFService,
      LibService: this.state.LibService,
      REFBranche: this.props.branche
    })
  })
  .then(response => response.json())
  .then(message => {
    if (message === "ServiceEX"){
      this.setState({ErrorMessage: "Le service existe déja"})
    } else {
      window.location.reload(false)
    }
  })
}

有两种可行的处理方式，优先推荐第一种，不用刷新页面就能更新数据：

方案1：避免页面刷新（推荐） #

提交成功后，直接更新本地状态里的Services数组，或者重新请求一次Services列表，这样既能展示新数据，又不会丢失当前的context状态：

OnSubmitService = () => {
  fetch("http://localhost:3000/AddService", {
    method: "post",
    headers: {"Content-Type": "application/json"},
    body: JSON.stringify({
      REFService: this.state.REFService,
      LibService: this.state.LibService,
      REFBranche: this.props.branche
    })
  })
  .then(response => response.json())
  .then(message => {
    if (message === "ServiceEX"){
      this.setState({ErrorMessage: "Le service existe déja"})
    } else {
      // 方式1：直接将新添加的Service加入现有数组
      const newService = {
        REFService: this.state.REFService,
        LibService: this.state.LibService,
        REFBranche: this.props.branche
      };
      this.setState(prevState => ({
        Services: [...prevState.Services, newService],
        // 清空输入框内容
        REFService: '',
        LibService: ''
      }));

      // 方式2：重新请求Services列表（适合需要从后端获取完整最新数据的场景）
      // fetch("http://localhost:3000/GetServices")
      //   .then(res => res.json())
      //   .then(services => this.setState({ Services: services }));
    }
  })
}

方案2：刷新页面时保留状态 #

如果必须要刷新页面，就把当前的context状态存在localStorage里，组件初始化时从localStorage读取并恢复：

constructor(){
    super()
    // 从localStorage读取保存的context，无则用默认值Branches
    const savedContext = localStorage.getItem('currentContext') || "Branches";
    this.state = {
        Branches: [],
        Services: [],
        Guichets: [],
        context: savedContext,
        Branche: '',
        isHidden: true
    }
}

// 假设你有切换context的方法，比如这个示例中的handleContextChange
handleContextChange = (newContext) => {
    this.setState({ context: newContext });
    // 切换时同步保存到localStorage
    localStorage.setItem('currentContext', newContext);
}

// 提交成功后刷新页面，此时localStorage已保存当前context，初始化时会自动恢复
OnSubmitService = () => {
  fetch("http://localhost:3000/AddService", {
    method: "post",
    headers: {"Content-Type": "application/json"},
    body: JSON.stringify({
      REFService: this.state.REFService,
      LibService: this.state.LibService,
      REFBranche: this.props.branche
    })
  })
  .then(response => response.json())
  .then(message => {
    if (message === "ServiceEX"){
      this.setState({ErrorMessage: "Le service existe déja"})
    } else {
      window.location.reload(false)
    }
  })
}

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