reactjs - 如何通过 React Context API 使用到达路由器？

Question

我以前使用下面这样的到达路由器，它工作正常

.....
<Router>
   <ComponentA path="/:id">
   <ComponentB path="/">
<Router>
....

我决定用上下文重构我的代码，代码被重构为这样的：

<GlobalContextProvider>
  <GlobalContext.Consumer>
  {( context) =>{
  return(
  .....
   <Router>
      <ComponentA path="/:id">
      <ComponentB path="/">
   <Router>
   ....
  }

重构后，ComponentA 无法正常工作，因为未传递 url 参数 prop id

在 ComponentA.js 中，像这样测试：

 componentDidMount() {
    const { id } = this.props;
    console.log(id);    // return undefined
  }

同样，当 I 时console.log(this.props)，它返回的结果与this.context

有人可以帮我理解为什么会这样吗？如何正确重构上下文？

非常感谢

Answer 1

我终于弄清楚了这个问题：

ComponentA用 HOC 包装，并通过添加{...this.props}到 ComposedComponent，

ComponentA可以从this.props

请参考这个问题Passing React context through an HOC to a Wrapped component

Answer 2

我不确定它一开始是否有效。

要访问参数值，您必须这样做：

const { match } = props;
const { params } = match;
const { id } = params;

您可能需要将组件包装到 withRouter(...)

import { withRouter } from "react-router-dom";
class MyComp extends PureComponent {...}
export default withRouter(MyComp);