Question

使用react-Router，我希望我的网址的第一个标记是网站将使用的语言（英语，法语，西班牙语等），用于国际化目的。例如：

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

或

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

我的路线目前看起来像这样：

<Route path="/">
    <Route handler={App} path="/:lang/?">
        <NotFoundRoute handler={NotFound}/>
        <DefaultRoute name="index" handler={Index} />
        <Route name="help" path="help" handler={Help} />
    </Route>

    /* add a default lang */
    <Redirect from="/" to="index" params={{lang: 'en'}} />
</Route>

您会在任何路线中看到“：lang”参数始终存在。

当我创建<Link>组件时，让我们说从“索引”页面到“帮助”页面，我目前这样做：

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

我似乎需要添加params={this.props.params}（或{...this.props}或直接添加“lang”param）或路由器抱怨：

Invariant Violation: Missing "lang" parameter for path "/:lang/?/help"

但是由于“/：lang /”部分下面的所有路径总是具有相同的lang，有没有办法在创建链接时自动传递“lang”参数而不必显式添加它？

Answer 1

你可以创建一个自动设置params的自定义组件......如下所示：

＆＃13;

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

＆＃13;

查看此处的最后一条评论，了解该链接是如何被转换的＃34;进入Tab组件。

React-Router - 如何自动将当前参数传递给“<link />”？

1 个答案: