Блог

У меня есть этот маршрутизатор, любая страница, которая должна иметь макет, обернута withLayout HOC.

Мне нужно передать на некоторые страницы пользовательский контекст, как я могу добавить user реквизит?

 const withLayout = () => Component => props => (
  <div css={pageWrap}>
    <Header user={props.user} />
    <Component {...props} />
  </div>
);

export default function Router() {
  return (
    <AuthConsumer>
      {({ user }) => (
        <Switch>
          <Route exact path="/" component={withLayout()(Home, { user })} />
          <Route exact path="/page1" component={withLayout()(Page1)} />
          <Route exact path="/page2" component={withLayout()(Page2)} />
        </Switch>
      )}
    </AuthConsumer>
  );
}
  

Я думаю, у вас проблема с вашим withLayout . Это должно быть:

 const withLayout = () => (Component, props = {}) => (
  <div css={pageWrap}>
    <Header user={props.user} />
    <Component {...props} />
  </div>
);
  

Что такое AuthConsumer?

Вы могли бы использовать contextType = AuthContext внутри компонентов вашей страницы. [от]

 class MyClass extends React.Component {
  static contextType = MyContext;
  render() {
    let value = this.context;
    /* render something based on the value */
  }
}
  

Я смог заставить это работать следующим образом:

 <Route exact path="/" render={props => withLayout()(Home)({ ...props, user })} />