reactjs - React-Router - How to automatically pass a current param to a "<Link>"? -


using react-router, want first token of urls language site use (english, french, spanish, etc.), internationalisation purpose. exemple :

http://example.com/#/en http://example.com/#/en/help 

or

http://example.com/#/fr http://example.com/#/fr/help 

my routes :

<route path="/">     <route handler={app} path="/:lang/?">         <notfoundroute handler={notfound}/>         <defaultroute name="index" handler={index} />         <route name="help" path="help" handler={help} />     </route>      /* add default lang */     <redirect from="/" to="index" params={{lang: 'en'}} /> </route> 

you see ":lang" parameter there, in route.

when create <link> component, let's "index" page "help" page, :

<link to="help" params={this.props.params}>{t("header_menu_help")}</link> 

it seems need add params={this.props.params} (or {...this.props} or directly "lang" param) or otherwise router complains :

invariant violation: missing "lang" parameter path "/:lang/?/help" 

but since routes below "/:lang/" part have same lang, there way automatically pass "lang" parameter without having explicitly add it, when creating link?

you create custom component automatically sets params... this:

// langlink component  var langlink = react.createclass({    render: function() {      return <link {...this.props}>{this.props.children}</link>;    }  });    // app  var app = react.createclass({    render: function() {      return <langlink to="path">my link</langlink>;    }  });

check out last comment here see how the link "converted" tab component.


Comments