Как использовать роутер с React Context API? - PullRequest
Новая
       23

Как использовать роутер с React Context API?

0 голосов
/ 11 января 2020

Раньше я использовал такой маршрутизатор, как этот, и он работает нормально 

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

Я решил реорганизовать свой код в контексте, и код реорганизовался примерно так: 

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

После рефакторинга, ComponentA не работает должным образом, так как идентификатор пропуска URL-параметра не передается

В ComponentA. js, выполните следующие проверки: 

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

Также когда я console.log(this.props) возвращает тот же результат, что и this.context

Может кто-нибудь помочь мне понять, почему это происходит? Как правильно выполнить рефакторинг с контекстом?

Большое спасибо

Ответы [ 2 ]

1 голос
/ 16 января 2020

Я, наконец, выяснил эту проблему:

ComponentA обернут с HO C, и, добавив {...this.props} к ComposedComponent, enter image description here enter image description here

ComponentA может получить доступ к параметрам URL из this.props

Пожалуйста, обратитесь к этой проблеме Передача контекста React через HO C в обернутый компонент

0 голосов
/ 11 января 2020

Сначала я не уверен, что он работал.

Чтобы получить доступ к значению параметра, вы должны сделать это следующим образом: 

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

Возможно, вам придется обернуть компонент в withRouter (...) 

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