通过链接反应路由器中的道具
我正在使用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')) }); “链接”呈现页面，但不会将该属性传递给新视图。 以下是视图代码
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;
我怎样才能使用“链接”传递数据？
此行缺lesspath ：
<Route name="ideas" handler={CreateIdeaView} />
应该：
<Route name="ideas" path="/:testvalue" handler={CreateIdeaView} />
鉴于以下Link ：
<Link to="ideas" params={{ testvalue: "hello" }}>Create Idea</Link>
从您在文档上发布的链接，朝向页面底部：
给定像
<Route name="user" path="/users/:userId"/>
更新：
请参阅： https ： //github.com/reactjs/react-router/blob/master/upgrade-guides/v2.0.0.md#link-to-onenter-and-isactive-use-location-descriptors
从1.x升级指南到2.x：
onEnter中的
<Link to>，isActive使用位置描述符除了string以外，现在可以使用一个位置描述符。 查询和状态道具已被弃用。
// v1.0.x
<Link to="/foo" query={{ the: 'query' }}/>// v2.0.0
<Link to={{ pathname: '/foo', query: { the: 'query' } }}/>//在2.x中仍然有效
<Link to="/foo"/>同样，现在从一个onEnter钩子redirect也使用一个位置描述符。
// v1.0.x
(nextState, replaceState) => replaceState(null, '/foo') (nextState, replaceState) => replaceState(null, '/foo', { the: 'query' })// v2.0.0
(nextState, replace) => replace('/foo') (nextState, replace) => replace({ pathname: '/foo', query: { the: 'query' } })对于自定义链接类的组件，这同样适用于router.isActive，以前的history.isActive。
// v1.0.x
history.isActive(pathname, query, indexOnly)// v2.0.0
router.isActive({ pathname, query }, indexOnly)
v3更新到v4：
- https://github.com/ReactTraining/react-router/pull/3803
- https://github.com/ReactTraining/react-router/pull/3669
- https://github.com/ReactTraining/react-router/pull/3430
- https://github.com/ReactTraining/react-router/pull/3443
- https://github.com/ReactTraining/react-router/pull/3803
- https://github.com/ReactTraining/react-router/pull/3636
- https://github.com/ReactTraining/react-router/pull/3397
-
https://github.com/ReactTraining/react-router/pull/3288
接口基本上和v2一样，最好查看CHANGES.md中的react-router，因为这是更新的地方。
我有同样的问题，从我的应用程序显示用户的详细信息。
你可以这样做：
<Link to={'/ideas/'+this.props.testvalue }>Create Idea</Link>
要么
<Link to="ideas/hello">Create Idea</Link>
和
<Route name="ideas/:value" handler={CreateIdeaView} />
通过在您的CreateIdeaView类this.props.params.value得到这个。
你可以看到这个video帮助了我很多： https : //www.youtube.com/watch?v=ZBxMljq9GSE
至于react-router-dom 4.xx（ https://www.npmjs.com/package/react-router-dom ），你可以传递参数到组件路由到：
<Route path="/ideas/:value" component ={CreateIdeaView} />
（考虑到testValue prop被传递给相应的组件（比如上面的App组件）来渲染链接）
<Link to={`/ideas/${ this.props.testValue }`}>Create Idea</Link>
传递道具到你的组件构造函数的值参数将可通过
props.match.params.value
有一种方法可以传递多个参数。 你可以传递“to”作为对象而不是string。
<Route path="/category/:catId" component={Category} / > const newTo = { pathname: "/article/595212758daa6810cbba4104", param1: "Par1" }; <Link to={newTo}> </Link> this.props.match.params.id // this is 595212758daa6810cbba4104 this.props.location.param1 // this is Par1
