React路由器:状态变量已更新，setState未正确传递到路由

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

// 创建一个上下文对象
const StateContext = createContext();

const App = () => {
  const [state, setState] = useState('');

  // 定义一个更新状态变量的函数
  const updateState = (newState) => {
    setState(newState);
  };

  return (
    <Router>
      {/* 将状态变量和更新函数传递给上下文Provider */}
      <StateContext.Provider value={{ state, updateState }}>
        <div>
          <nav>
            <ul>
              <li>
                <Link to="/">Home</Link>
              </li>
              <li>
                <Link to="/about">About</Link>
              </li>
            </ul>
          </nav>

          {/* 使用Route定义路由组件 */}
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </div>
      </StateContext.Provider>
    </Router>
  );
};

const Home = () => {
  // 从上下文中获取状态变量和更新函数
  const { state, updateState } = useContext(StateContext);

  return (
    <div>
      <h2>Home</h2>
      <p>State: {state}</p>
      <button onClick={() => updateState('New State')}>Update State</button>
    </div>
  );
};

const About = () => {
  // 从上下文中获取状态变量
  const { state } = useContext(StateContext);

  return (
    <div>
      <h2>About</h2>
      <p>State: {state}</p>
    </div>
  );
};

export default App;