React Router, как использовать реквизит?

Question

У меня есть вопрос)

У меня есть маршрутизатор

<Switch>
<Route exact path={`/:lng(en|ru)?`} component={HomeView} />

......

<Route component={NotFoundView} />
</Switch>

Мне нужно во всех компонентах получить {this.props.match.parameters} и передать другому компоненту, например:

return (

    <I18n lang={this.props.match.paraments}>
                .....
    </I18n>

)

У меня есть много компонентов, и каждый компонент я должен связать с компонентом I18n.Это не удобно.Можно ли один раз обернуть все компоненты до I18n, а в I18n захватить {this.props.match.paraments} ???

Answer 1

1. Вы можете использовать HOC для создания функции Пример:

function withI18n(Comp, lang){
      return class I18nWrapper extends React.Component{
       ...
       
        render(){
          return(
            <I18n lang={lang}>
              <Comp {...props}/>
            </I18n>
          );
        }
      }
    }
    
// And in Router, you can use withI18n Hoc with render propery of Route component

<Switch>
    <Route exact path={`/:lng(en|ru)?`}
    render={(location, match, history) => {
     return withI18n(HomeView, match.path)
    }}

    ......

    <Route component={NotFoundView} />
    </Switch>

Если компонент I18n является провайдером, вы должны использовать его для переноса в корневое дерево (в app.js шаблона create-реагировать-app).В каждом компоненте маршрута в качестве HomeView реализуйте функцию для обновления местоположения в управление состоянием.