我使用路由进行导航。每次当我转到其他页面并返回时，我丢失了所有变量的值。我怎么才能解决这个问题呢？

// 创建一个 Context
const MyContext = React.createContext();

// 在父组件中提供 Context
class App extends React.Component {
  state = {
    myVariable: 'some value'
  };

  render() {
    return (
      <MyContext.Provider value={this.state.myVariable}>
        <Router>
          {/* 路由配置 */}
        </Router>
      </MyContext.Provider>
    );
  }
}

// 在子组件中使用 Context
class MyComponent extends React.Component {
  static contextType = MyContext;

  render() {
    return <div>{this.context}</div>;
  }
}

// 保存变量到 localStorage
localStorage.setItem('myVariable', 'some value');

// 从 localStorage 读取变量
const myVariable = localStorage.getItem('myVariable');

import React, { useEffect, useState } from 'react';

function MyComponent() {
  const [myVariable, setMyVariable] = useState('');

  useEffect(() => {
    // 组件挂载时从 localStorage 读取数据
    const storedValue = localStorage.getItem('myVariable');
    if (storedValue) {
      setMyVariable(storedValue);
    }
  }, []);

  useEffect(() => {
    // 组件更新时保存数据到 localStorage
    localStorage.setItem('myVariable', myVariable);
  }, [myVariable]);

  return <div>{myVariable}</div>;
}

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Link to="/page?myVariable=someValue">Go to Page</Link>
      <Route path="/page" component={MyComponent} />
    </Router>
  );
}

function MyComponent({ location }) {
  const queryParams = new URLSearchParams(location.search);
  const myVariable = queryParams.get('myVariable');
  return <div>{myVariable}</div>;
}