javascript - Pass props in Link react-router -


i using react react-router. trying pass property’s in "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 page not pass property new view. below 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 pass data using "link"?

this line missing path:

<route name="ideas" handler={createideaview} />

should be:

<route name="ideas" path="/:testvalue" handler={createideaview} />

given following link:

<link to="ideas" params={{ testvalue: "hello" }}>create idea</link>

from link posted on docs, towards bottom of page:

given route <route name="user" path="/users/:userid"/>

update:

see: https://github.com/reactjs/react-router/blob/master/upgrade-guides/v2.0.0.md#link-to-onenter-and-isactive-use-location-descriptors

from upgrade guide 1.x 2.x:

<link to>, onenter, , isactive use location descriptors

<link to> can take location descriptor in addition strings. query , state props deprecated.

// v1.0.x

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

// v2.0.0

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

// still valid in 2.x

<link to="/foo"/>

likewise, redirecting onenter hook uses location descriptor.

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

for custom link-like components, same applies router.isactive, history.isactive.

// v1.0.x

history.isactive(pathname, query, indexonly)

// v2.0.0

router.isactive({ pathname, query }, indexonly)

update v3 v4:


-

Comments

Post a Comment