从另一个上下文访问路由器上下文

Question

我试图从另一个上下文提供者访问react-router上下文，但是useParams()总是返回一个空对象。

这是我尝试使用的简单示例。

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

const TestContext = React.createContext<any>({});

const TestProvider: React.FC = ({ children }) => {
  const params = useParams();
  return (
    <TestContext.Provider value={params}>
      <pre>TestContext.Provider: {JSON.stringify(params)}</pre>
      {children}
    </TestContext.Provider>
  );
};

const TestRoute: React.FC = () => {
  const params = useParams();
  return (
    <>
      <pre>TestRoute: {JSON.stringify(params)}</pre>
      <TestContext.Consumer>
        {(value) => <pre>TextContext.Consumer: {JSON.stringify(value)}</pre>}
      </TestContext.Consumer>
    </>
  );
};

function App() {
  return (
    <BrowserRouter>
      <TestProvider>
        <Route path="/:test" component={TestRoute} />
      </TestProvider>
    </BrowserRouter>
  );
}

这是我得到的输出。

TestContext.Provider: {}
TestRoute: {"test":"asdf"}
TextContext.Consumer: {}

这是我想要的输出。

TestContext.Provider: {"test":"asdf"}
TestRoute: {"test":"asdf"}
TextContext.Consumer: {"test":"asdf"}