在Link react-router中传递道具 [英] Pass props in Link react-router

查看：158
本文介绍了在Link react-router中传递道具的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用react-react进行反应。
我试图在反应路由器的链接中传递属性

I am using react with react-router. I am trying to pass property’s in a "Link" of react-router 

var React  = require('react');
var Router = require('react-router');
var CreateIdeaView = require('./components/createIdeaView.jsx');

var Link = Router.Link;
var Route = Router.Route;
var DefaultRoute = Router.DefaultRoute;
var RouteHandler = Router.RouteHandler;
var App = React.createClass({
  render : function(){
    return(
      <div>
        <Link to="ideas" params={{ testvalue: "hello" }}>Create Idea</Link>
        <RouteHandler/>
      </div>
    );
  }
});

var routes = (
  <Route name="app" path="/" handler={App}>
    <Route name="ideas" handler={CreateIdeaView} />
    <DefaultRoute handler={Home} />
  </Route>
);

Router.run(routes, function(Handler) {

  React.render(<Handler />, document.getElementById('main'))
});

链接呈现页面但不会将属性传递给新视图。
以下是查看代码

The "Link" renders the page but does not pass the property to the new view. Below is the view code 

var React = require('react');
var Router = require('react-router');

var CreateIdeaView = React.createClass({
  render : function(){
    console.log('props form link',this.props,this)//props not recived
  return(
      <div>
        <h1>Create Post: </h1>
        <input type='text' ref='newIdeaTitle' placeholder='title'></input>
        <input type='text' ref='newIdeaBody' placeholder='body'></input>
      </div>
    );
  }
});

module.exports = CreateIdeaView;

如何使用链接传递数据？

How can I pass data using "Link"?

推荐答案

此行缺失路径：

<Route name="ideas" handler={CreateIdeaView} />

应该是：

<Route name="ideas" path="/:testvalue" handler={CreateIdeaView} />

鉴于以下 Link ：

<Link to="ideas" params={{ testvalue: "hello" }}>Create Idea</Link>

从您在文档上发布的链接，到页面底部：

From the link that you posted on the docs, towards the bottom of the page:


给定类似的路线< Route name =userpath =/ users /：userId/>


请参阅： https://github.com/ReactTraining/react-router/blob/0c6d51cd6639aff8a84b11d89e27887b3558ed8a/ upgrade-guides / v2.0.0.md＃link-to-onenter-and-isactive-use-location-descriptors


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

From the upgrade guide from 1.x to 2.x:

<链接到> ，onEnter，和isActive使用位置描述符

<Link to>, onEnter, and isActive use location descriptors

<链接到> 现在可以获取除st之外的位置描述符戒指。
不推荐使用查询和状态道具。

<Link to> can now take a location descriptor in addition to strings. The query and state props are deprecated.

// v1.0.x

// v1.0.x

<Link to="/foo" query={{ the: 'query' }}/>

// v2.0.0

// v2.0.0

<Link to={{ pathname: '/foo', query: { the: 'query' } }}/>

//仍然在2.x中有效

// Still valid in 2.x

<Link to="/foo"/>

同样，从onEnter挂钩重定向现在也使用位置
描述符。

Likewise, redirecting from an onEnter hook now also uses a location descriptor.

// v1.0.x

// v1.0.x

(nextState, replaceState) => replaceState(null, '/foo')
(nextState, replaceState) => replaceState(null, '/foo', { the: 'query' })

// v2。 0.0

// v2.0.0

(nextState, replace) => replace('/foo')
(nextState, replace) => replace({ pathname: '/foo', query: { the: 'query' } })

对于类似自定义链接的组件，同样适用于router.isActive，
以前的history.isActive。

For custom link-like components, the same applies for router.isActive, previously history.isActive.

// v1.0.x

// v1.0.x

history.isActive(pathname, query, indexOnly)

// v2.0.0

// v2.0.0

router.isActive({ pathname, query }, indexOnly)




v3到v4的更新：



查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆