React中不同路由中的不同上下文

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

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

// 定义共享数据和方法
class MyProvider extends React.Component {
  state = {
    data: 'Hello World',
  };

  updateData = (newData) => {
    this.setState({ data: newData });
  };

  render() {
    return (
      // 将共享数据和方法通过value属性传递给子组件
      <MyContext.Provider value={{ data: this.state.data, updateData: this.updateData }}>
        {this.props.children}
      </MyContext.Provider>
    );
  }
}

// 使用上下文数据的组件
class MyComponent extends React.Component {
  // 订阅上下文数据
  static contextType = MyContext;

  render() {
    // 使用上下文数据
    const { data, updateData } = this.context;

    return (
      <div>
        <p>{data}</p>
        <button onClick={() => updateData('New Data')}>Update Data</button>
      </div>
    );
  }
}

// 路由组件
const App = () => (
  <Router>
    <MyProvider>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>

      <Route path="/" exact component={MyComponent} />
      <Route path="/about" component={MyComponent} />
    </MyProvider>
  </Router>
);

export default App;