如何在React Route的父级中设置状态变量？

import React, { useState } from 'react';

const ParentComponent = () => {
  const [stateVariable, setStateVariable] = useState(initialValue);

  // 其他组件和逻辑

  return (
    <div>
      {/* 子组件和其他内容 */}
    </div>
  );
};

export default ParentComponent;

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

const StateContext = createContext();

const ParentComponent = () => {
  const [stateVariable, setStateVariable] = useState(initialValue);

  return (
    <StateContext.Provider value={{ stateVariable, setStateVariable }}>
      <div>
        {/* 子组件和其他内容 */}
      </div>
    </StateContext.Provider>
  );
};

export default ParentComponent;

import React, { useContext } from 'react';
import StateContext from './ParentComponent';

const ChildComponent = () => {
  const { stateVariable, setStateVariable } = useContext(StateContext);

  // 使用状态变量进行操作

  return (
    <div>
      {/* 组件内容 */}
    </div>
  );
};

export default ChildComponent;