Pass props in Link react-router

Question

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         lt div gt           lt Link to  ideas  params    testvalue   hello     gt Create Idea lt  Link gt           lt RouteHandler  gt         lt  div gt                  var routes        lt Route name  app  path     handler  App  gt       lt Route name  ideas  handler  CreateIdeaView    gt       lt DefaultRoute handler  Home    gt     lt  Route gt      Router run routes  function Handler       React render  lt Handler   gt   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         lt div gt           lt h1 gt Create Post   lt  h1 gt           lt input type  text  ref  newIdeaTitle  placeholder  title  gt  lt  input gt           lt input type  text  ref  newIdeaBody  placeholder  body  gt  lt  input gt         lt  div gt                  module exports   CreateIdeaView    How can I pass data using  Link

User · Answer

I had the same problem to show an user detail from my application.

You can do this:

<Link to={'/ideas/'+this.props.testvalue }>Create Idea</Link>

or

<Link to="ideas/hello">Create Idea</Link>

and

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

to get this via this.props.match.params.value at your CreateIdeaView class.

You can see this video that helped me a lot: https://www.youtube.com/watch?v=ZBxMljq9GSE

User · Answer

The simplest approach would be to make use of the to object within link as mentioned in documentation  https   reactrouter com web api Link to-object  lt Link   to        pathname   quot  courses quot       search   quot  sort name quot       hash   quot  the-hash quot       state    fromDashboard  true  id  1          gt    We can retrieve above params  state  as below  this props location state      fromDashboard  true  id  1

User · Answer

there is a way you can pass more than one parameter  You can pass  to  as object instead of string      your route setup  lt Route path   category  catId  component  Category     gt      your link creation const newTo        pathname    category 595212758daa6810cbba4104      param1   Par1         link to the  location     see  https   reacttraining com react-router web api location   lt Link to  newTo  gt   lt  Link gt      In your Category Component  you can access the data like this this props match params catId    this is 595212758daa6810cbba4104  this props location param1    this is Par1

User · Answer

as for react-router-dom 4 x x  https   www npmjs com package react-router-dom  you can pass params to the component to route to via     lt Route path   ideas  value  component   CreateIdeaView    gt    linking via  considering testValue prop is passed to the corresponding component  e g  the above App component  rendering the link    lt Link to    ideas    this props testValue     gt Create Idea lt  Link gt    passing props to your component constructor the value param will be available via  props match params value

User · Answer

To work off the answer above  https   stackoverflow com a 44860918 2011818   you can also send the objects inline the  To  inside the Link object         lt Route path   foo  fooId  component  foo     gt    lt Link to   pathname  foo newb  sampleParam   Hello   sampleParam2   World      gt  CLICK HERE  lt  Link gt   this props match params fooId   newb this props location sampleParam    Hello  this props location sampleParam2    World

User · Answer

If you are just looking to replace the slugs in your routes  you can use generatePath that was introduced in react-router 4 3  2018   As of today  it isn t included in the react-router-dom  web  documentation  but is in react-router  core   Issue 7679    myRoutes js export const ROUTES       userDetails   quot  user  id quot          MyRouter jsx import ROUTES from    routes    lt Route path  ROUTES userDetails        gt       MyComponent jsx import   generatePath   from  react-router-dom  import ROUTES from    routes    lt Link to  generatePath ROUTES userDetails    id  1     gt ClickyClick lt  Link gt   It s the same concept that django urls reverse has had for a while

User · Answer

For v5   lt Link   to        pathname   quot  courses quot       search   quot  sort name quot       hash   quot  the-hash quot       state    fromDashboard  true          gt   React Router Official Site

User · Answer

Typescript  For approach mentioned like this in many answers    lt Link     to            pathname    my-path           myProps                hello   Hello World                   gt      Press Me  lt  Link gt    I was getting error      Object literal may only specify known properties  and  myProps  does not exist in type  LocationDescriptorObject     location  Location     LocationDescriptor     Then I checked in the official documentation they have provided state for the same purpose   So it worked like this    lt Link     to            pathname    my-path           state                hello   Hello World                   gt      Press Me  lt  Link gt    And in your next component you can get this value as following   componentDidMount         console log  received   this props location state hello

User · Answer

This line is missing path    lt Route name  ideas  handler  CreateIdeaView    gt    Should be    lt Route name  ideas  path    testvalue  handler  CreateIdeaView    gt    Given the following Link  outdated v1     lt Link to  ideas  params    testvalue   hello     gt Create Idea lt  Link gt    Up to date as of v4   const backUrl     some other value     this props testvalue      hello   lt Link to   pathname      this props testvalue    query   backUrl      gt    and in the withRouter CreateIdeaView  components render     console log this props match params testvalue  this props location query backurl     output hello  some other value   From the link that you posted on the docs  towards the bottom of the page      Given a route like  lt Route name  user  path   users  userId   gt        Updated code example with some stubbed query examples    x000D   x000D     import React   Component  Props  ReactDOM  from  react   x000D     import  Route  Switch  from  react-router   etc etc x000D     this snippet has it all attached to window since its in browser x000D  const   x000D    BrowserRouter  x000D    Switch  x000D    Route  x000D    Link  x000D    NavLink x000D      ReactRouterDOM  x000D   x000D  class World extends React Component   x000D    constructor props    x000D      super props   x000D      console dir props         x000D      this state     x000D        fromIdeas  props match params WORLD     unknown  x000D        x000D      x000D    render     x000D      const   match  location    this props  x000D      return   x000D         lt React Fragment gt  x000D           lt h2 gt  this state fromIdeas  lt  h2 gt  x000D           lt span gt thing   x000D             location query  x000D               amp  amp  location query thing  x000D           lt  span gt  lt br  gt  x000D           lt span gt another1   x000D           location query  x000D             amp  amp  location query another1  x000D                none for 2 or 3   x000D           lt  span gt  x000D         lt  React Fragment gt  x000D         x000D      x000D    x000D   x000D  class Ideas extends React Component   x000D    constructor props    x000D      super props   x000D      console dir props   x000D      this state     x000D        fromAppItem  props location item  x000D        fromAppId  props location id  x000D        nextPage   world1   x000D        showWorld2  false x000D        x000D      x000D    render     x000D      return   x000D         lt React Fragment gt  x000D             lt li gt item   this state fromAppItem okay  lt  li gt  x000D             lt li gt id   this state fromAppId  lt  li gt  x000D             lt li gt  x000D               lt Link  x000D                to    x000D                  pathname    hello   this state nextPage     x000D                  query  thing   asdf   another1   stuff   x000D                   gt  x000D                Home 1 x000D               lt  Link gt  x000D             lt  li gt  x000D             lt li gt  x000D               lt button  x000D                onClick       gt  this setState   x000D                nextPage   world2   x000D                showWorld2  true    gt  x000D                switch  2 x000D               lt  button gt  x000D             lt  li gt  x000D             this state showWorld2  x000D              amp  amp   x000D              lt li gt  x000D                 lt Link  x000D                  to    x000D                    pathname    hello   this state nextPage     x000D                    query  thing   fdsa      gt  x000D                  Home 2 x000D                 lt  Link gt  x000D               lt  li gt   x000D              x000D           lt NavLink to   hello  gt Home 3 lt  NavLink gt  x000D         lt  React Fragment gt  x000D         x000D      x000D    x000D   x000D   x000D  class App extends React Component   x000D    render     x000D      return   x000D         lt React Fragment gt  x000D           lt Link to    x000D            pathname   ideas  id    x000D            id  222   x000D            item    x000D                okay  123 x000D                gt Ideas lt  Link gt  x000D           lt Switch gt  x000D             lt Route exact path   ideas  id   component  Ideas   gt  x000D             lt Route path   hello  WORLD   thing   component  World   gt  x000D           lt  Switch gt  x000D         lt  React Fragment gt  x000D         x000D      x000D    x000D   x000D  ReactDOM render   x000D     lt BrowserRouter gt  x000D       lt App   gt  x000D     lt  BrowserRouter gt  x000D     document getElementById  ideas     x000D   lt script src  https   cdnjs cloudflare com ajax libs react 16 6 3 umd react production min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react-dom 16 6 3 umd react-dom production min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react-router-dom 4 3 1 react-router-dom min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react-router 4 3 1 react-router min js  gt  lt  script gt  x000D   x000D   lt div id  ideas  gt  lt  div gt  x000D   x000D   x000D    updates   See  https   github com ReactTraining react-router blob 0c6d51cd6639aff8a84b11d89e27887b3558ed8a upgrade-guides v2 0 0 md link-to-onenter-and-isactive-use-location-descriptors     From the upgrade guide from 1 x to 2 x        lt Link to gt   onEnter  and isActive use location descriptors       lt Link to gt  can now take a location descriptor in addition to strings    The query and state props are deprecated          v1 0 x   lt Link to   foo  query    the   query      gt           v2 0 0   lt Link to    pathname    foo   query    the   query        gt           Still valid in 2 x   lt Link to   foo   gt        Likewise  redirecting from an onEnter hook now also uses a location   descriptor          v1 0 x   nextState  replaceState    gt  replaceState null    foo    nextState  replaceState    gt  replaceState null    foo     the   query              v2 0 0   nextState  replace    gt  replace   foo    nextState  replace    gt  replace   pathname    foo   query    the   query             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     updates for v3 to v4    https   github com ReactTraining react-router blob 432dc9cf2344c772ab9f6379998aa7d74c1d43de packages react-router docs guides migrating md 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  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     legacy migration documentation  for posterity   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

User · Answer

After install react-router-dom   lt Link     to          pathname    product-detail         productdetailProps           productdetail   I M passed From Props                gt      Click To Pass Props  lt  Link gt    and other end where the route is redirected do this  componentDidMount                 console log  product props is   this props location productdetailProps

User · Answer

See this post for reference  The simple is that    lt Link to         pathname   your location        state   send anything from here       Now you want to access it   this props location state

User · Answer

Route     lt Route state  this state  exact path   customers  id  render   props    gt   lt PageCustomer     props  state  this state    gt     gt    And then can access params in your PageCustomer component like this  this props match params id   For example an api call in PageCustomer component    axios      method   get      url    api customers     this props match params id     data         headers    X-Requested-With    XMLHttpRequest

[javascript] Pass props in Link react-router

Examples related to javascript

Examples related to reactjs

Examples related to react-router