React Router如何使用道具？

Question

i have question)

I have router

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

......

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

I need in all component get {this.props.match.parameters} and transfer to Another Component for example:

return (

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

)

There are many components i have and each components i must wrap to I18n component. It is not conveniently. Can i wrap one times all components to I18n and in I18n grab {this.props.match.paraments} ???

Answer 1

1. You can use HOC to create a function Example:

 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> 

2. If I18n component is provider, you should use it to wrap in root tree (in app.js of create-react-app boilerplate). In each route component as HomeView, implement a function to update location into state management.