0

I have a multilanguage site that uses url for determining language.

English: HOST/games/

Spanish: HOST/juegos/

Romanian (default): HOST/

Right now I declare my routes like so:

<Route path="/(:lang/)" component={App}>
    <Route path="search/:search" component={Search}/>
    <Route path="category/:title/(:page/)" component={Category}/>
    <Route path="game/:title" component={Game}/>
    <Route path="login" component={Login}/>
    <Route path="signup" component={Signup}/>

    { /* es */ }
    <Route path="categoria/:title/(:page/)" component={Category}/>
    <Route path="juego/:title" component={Game}/>
    ...
</Route>

This works fines, but it allows for someone to go to HOST/games/categoria/:title and it'll work when it shouldn't.

I envision being able to do the following:

<Route>
<Route lang="en" path="/games/" component={App}>
    <Route path="category/:title/(:page/)" component={Category}/>
    <Route path="game/:title" component={Game}/>
    ...
</Route>
<Route lang="es" path="/juegos/" component={App}>
    <Route path="categoria/:title/(:page/)" component={Category}/>
    <Route path="juego/:title" component={Game}/>
    ...
</Route>
...
</Route>

Is there any way to pass custom props? or how would I implement this?

collinglass
  • 800
  • 4
  • 11
  • 31
  • Found the answer to my Question on another [thread](http://stackoverflow.com/a/32761932/2202797) on stackoverflow. – collinglass Feb 17 '16 at 20:26

1 Answers1

0

I'm developing a solution to inject custom props to elements / components.

By now it's dead simple, but it works ... if the Component we consume is designed to work w/ custom props.

It's just a tiny custom(props)(...args) , therefore the Component becomes fully customizable, configurable according the follwing scheme:

var custom = {
  customRootProp: 'value',
  onHandle: function() {}, // handlers are not evaluated by default
  children: {
    AChildComponent: {
      customChildComponentProp: function(...args) { return evaluatedWithArgs; }
    }
  }
};

// there's also a `customOptions` prop to configure the way
// `custom` function resolve custom props

var el = (
  <Component custom={custom} />
);

Have a look at react-custom-props (available as npm and browser package).

Hope it should help.

dethier
  • 1
  • 1