如何通过React Context API使用reach路由器？

import { Router } from '@reach/router';

function App() {
  return (
    <Router>
      {/* 定义你的路由 */}
    </Router>
  );
}

import { Route } from '@reach/router';

function App() {
  return (
    <Router>
      <Route path="/" component={Home} />
      <Route path="/about" component={About} />
      {/* 其他路由 */}
    </Router>
  );
}

import React from 'react';

const MyContext = React.createContext();

function MyProvider() {
  const sharedData = '共享的数据';

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

function MyConsumer() {
  return (
    <MyContext.Consumer>
      {value => (
        <div>{value}</div>
      )}
    </MyContext.Consumer>
  );
}