Question

我正在创建多语言应用。这是我路线的一部分。

<Route path="/" component={App}>
    {subRoutes}
    <Route path=":lang">
        {subRoutes}
    </Route>
</Route>

在App.js中我有链接。

 <Link to="/" onlyActiveOnIndex>Home</Link>
 <Link to="about">About</Link>

我需要的是将lang参数传递给Links。当我访问URL example.com/de时，“about”链接应该将我重定向到example.com/fr/about。但它改为将我重定向到example.com/about。附：我正在使用react-router 2.0.0

Answer 1

取自React Router official docs：

从1.x到2.x的升级指南：

<Link to>，onEnter，isActive使用位置描述符

<Link to>现在除了字符串之外还可以使用位置描述符。   不推荐使用查询和状态道具。

// v1.0.x
<Link to="/foo" query={{ the: 'query' }}/>
// v2.0.0
<Link to={{ pathname: '/foo', query: { the: 'query' } }}/>

如果您正在使用pre-v2 react-router和命名路由，则可以在lang对象内传递param param，类似于查询参数的工作方式。

如果param对象不适合您，那么显而易见的替代方法是执行以下操作：

<Link to={`/${this.props.params.lang}/about`} > About </Link>

Answer 2

在我的练习中，将链接放在route：lang。

的组件中

<Route path="/" component={App}>
    {subRoutes}
    <Route path=":lang" **component={LinkComponent}**>
        {subRoutes}
    </Route>
</Route>

然后在LinkComponent.jsx中：

<Link to={`/${this.props.route.path}/about`}>About</Link>

如何将curent param传递给react-router中的<link />

2 个答案: