如何解决React-Router-dom与上下文API状态冲突

import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';

// 创建上下文对象
const MyContext = React.createContext();

// 上下文提供者组件
const ContextProvider = () => {
  const [state, setState] = React.useState('Hello');

  return (
    <MyContext.Provider value={{ state, setState }}>
      // 路由组件
      <BrowserRouter>
        <Route path="/" component={Component1} />
        <Route path="/page2" component={Component2} />
      </BrowserRouter>
    </MyContext.Provider>
  );
};

// 组件1
const Component1 = () => {
  // 使用上下文API的消费者组件获取状态值
  const { state, setState } = React.useContext(MyContext);

  return (
    <div>
      <h1>{state}</h1>
      <button onClick={() => setState('World')}>Update State</button>
    </div>
  );
};

// 组件2
const Component2 = () => {
  // 使用上下文API的消费者组件获取状态值
  const { state } = React.useContext(MyContext);

  return <h1>{state}</h1>;
};

// 应用程序的入口文件
const App = () => {
  return (
    <ContextProvider>
      <Component1 />
      <Component2 />
    </ContextProvider>
  );
};

export default App;