如何将上下文api与react-router-dom"："^5.2.0“和react"："^17.0.2”一起使用

npm install react-router-dom@5.2.0 react@17.0.2

import React from 'react';

const MyContext = React.createContext();

import React from 'react';

const MyContext = React.createContext();

function App() {
  const sharedData = "Hello, World!";

  return (
    <MyContext.Provider value={sharedData}>
      {/* 其他组件 */}
    </MyContext.Provider>
  );
}

export default App;

import React from 'react';

const MyContext = React.createContext();

function MyComponent() {
  return (
    <MyContext.Consumer>
      {value => <p>{value}</p>}
    </MyContext.Consumer>
  );
}

export default MyComponent;

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

const MyContext = React.createContext();

function HomePage() {
  return (
    <MyContext.Consumer>
      {value => <p>{value}</p>}
    </MyContext.Consumer>
  );
}

function AboutPage() {
  return (
    <MyContext.Consumer>
      {value => <p>{value}</p>}
    </MyContext.Consumer>
  );
}

function App() {
  const sharedData = "Hello, World!";

  return (
    <MyContext.Provider value={sharedData}>
      <Router>
        <Switch>
          <Route exact path="/" component={HomePage} />
          <Route path="/about" component={AboutPage} />
        </Switch>
      </Router>
    </MyContext.Provider>
  );
}

export default App;