本文介绍了在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:

请参阅：

<链接到> ，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

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

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

(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

history.isActive(pathname, query, indexOnly)

// v2.0.0

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

v3到v4的更新：

界面基本上仍然相同作为v2，最好查看react-router的CHANGES.md，因为这是更新的地方。
The interface is basically still the same as v2, best to look at the CHANGES.md for react-router, as that is where the updates are.
后代的遗留移民文件
- https://github.com/ReactTraining/react-router/blob/dc7facf205f9ee43cebea9fab710dce036d04f04/packages/react-router/docs/guides/migrating.md
- https://github.com/ReactTraining/react-router/blob/0c6d51cd6639aff8a84b11d89e27887b3558ed8a/upgrade-guides/v1.0.0.md
- https://github.com/ReactTraining/react-router/blob/0c6d51cd6639aff8a84b11d89e27887b3558ed8a/upgrade-guides/v2.0.0.md
- https://github.com/ReactTraining/react-router/blob/0c6d51cd6639aff8a84b11d89e27887b3558ed8a/upgrade-guides/v2.2.0.md
- https://github.com/ReactTraining/react-router/blob/0c6d51cd6639aff8a84b11d89e27887b3558ed8a/upgrade-guides/v2.4.0.md
- https://github.com/ReactTraining/react-router/blob/0c6d51cd6639aff8a84b11d89e27887b3558ed8a/upgrade-guides/v2.5.0.md
这篇关于在Link react-router中传递道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！