Question

我有一个多语言网站，使用网址来确定语言。

英文： HOST /游戏/

西班牙语： HOST / JUEGOS /

罗马尼亚语（默认）： HOST /

现在我宣布我的路线是这样的：

<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>

这会产生罚款，但它允许某人进入HOST / games / categoria /：title，并且当它不应该工作时它会工作。

我设想能够做到以下几点：

<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>

有没有办法传递自定义道具？或者我将如何实现这个？

Answer 1

我正在开发一种解决方案，将自定义道具注入元素/组件。

到目前为止它很简单，但是它有效...如果我们消耗的组件设计为使用自定义道具。

它只是一个小custom(props)(...args)，因此该组件可完全自定义，可根据以下方案进行配置：

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} />
);

查看react-custom-props（可用作npm和浏览器包）。

希望它有所帮助。

React Router Custom Props或我该怎么做？

1 个答案: