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

您可以使用HOC创建功能示例：

＆＃13;

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>

＆＃13;

如果I18n组件是提供者，则应该使用它来包装根树（在create-react-app样板的app.js中）。在作为HomeView的每个路径组件中，实现一个将位置更新为状态管理的功能。

React路由器如何使用道具？

1 个答案: