react-router - pass props to handler component

Question

I have the following structure for my React js application using React Router     var Dashboard   require    Dashboard     var Comments   require    Comments       var Index   React createClass      render  function           return             lt div gt                lt header gt Some header lt  header gt                lt RouteHandler   gt            lt  div gt                       var routes         lt Route path     handler  Index  gt        lt Route path  comments  handler  Comments   gt        lt DefaultRoute handler  Dashboard   gt      lt  Route gt         ReactRouter run routes  function  Handler       React render  lt Handler  gt   document body             I want to pass some properties into the Comments component       normally I d do this like  lt Comments myprop  value    gt      What s the easiest and right way to do so with React Router

User · Answer

Copying from the comments by ciantic in the accepted response:

<Route path="comments" component={() => (<Comments myProp="value" />)}/>

This is the most graceful solution in my opinion. It works. Helped me.

User · Answer

UPDATE  Since new release  it s possible to pass props directly via the Route component  without using a Wrapper  For example  by using render prop   Component   class Greeting extends React Component     render         const  text  match   params     this props       const  name    params       return          lt React Fragment gt           lt h1 gt Greeting page lt  h1 gt           lt p gt             text   name           lt  p gt         lt  React Fragment gt                 Usage    lt Route path   greeting  name  render   props    gt   lt Greeting text  Hello        props    gt     gt    Codesandbox Example    OLD VERSION  My preferred way is wrap the Comments component and pass the wrapper as a route handler   This is your example with changes applied   var Dashboard   require    Dashboard    var Comments   require    Comments     var CommentsWrapper   React createClass     render  function          return          lt Comments myprop  myvalue   gt                  var Index   React createClass     render  function          return          lt div gt           lt header gt Some header lt  header gt           lt RouteHandler  gt         lt  div gt                  var routes        lt Route path     handler  Index  gt       lt Route path  comments  handler  CommentsWrapper   gt       lt DefaultRoute handler  Dashboard   gt     lt  Route gt      ReactRouter run routes  function  Handler      React render  lt Handler  gt   document body

User · Answer

Use the component with or without router based on Rajesh Naroth answer   class Index extends React Component      constructor props        super props         render         const foo    this props route    this props route foo   this props foo      return          lt h1 gt          Index -  foo         lt  h1 gt                var routes        lt Route path     foo  bar  component  Index   gt       Or your could do it this way   export const Index     foo  route     gt      const content    foo    foo    route    route foo    No content found      return  lt h1 gt  content  lt  h1 gt

User · Answer

React Router v 4 solution  I stumbled upon this question earlier today  and here is the pattern I use  Hopefully this is useful to anyone looking for a more current solution   I m not sure if this is the best solution  but this is my current pattern for this   I have typically have a Core directory where I keep my commonly used components with their relevant configurations  loaders  modals  etc   and I include a file like this   import React from  react  import   Route   from  react-router-dom   const getLocationAwareComponent    component    gt   props    gt       lt Route render   routeProps    gt  React createElement component       routeProps     props     gt     export default getLocationAwareComponent   Then  in the file in question  I ll do the following    import React from  react  import someComponent from  components SomeComponent  import   getLocationAwareComponent   from  components Core getLocationAwareComponent  const SomeComponent   getLocationAwareComponent someComponent      in render method   lt SomeComponent someProp  value    gt    You ll notice I import the default export of my component as humble camel-case  which lets me name the new  location-aware component in CamelCase so I can use it normally   Other than the additional import line and the assignment line  the component behaves as expected and receives all its props normally  with the addition of all the route props  Thus  I can happily redirect from component lifecycle methods with this props history push    check the location  etc   Hope this helps

User · Answer

The React Router v5 1  React  gt   16 8  way of doing this   lt Route path  quot  comments quot  gt       lt Comments myprop  quot value quot    gt   lt  Route gt   Now if you want to access Route Props inside your component then you can refer this solution  In case of functional component  there is another hook useParams   that is not mentioned in that post  More reference  React Router v5 1

User · Answer

In 1 0 and 2 0 you can use createElement prop of Router to specify how exactly to create your target element  Documentation source  function createWithDefaultProps Component  props        return  lt Component     props  myprop  value    gt         and then      lt Router createElement  createWithDefaultProps  gt           lt  Router gt

User · Answer

Use the solution like a below and this works in v3 2 5   lt Route   path  quot  foo quot    component       gt         lt Content       lang  quot foo quot        meta            description  lang foo description                gt         gt   or  lt Route path  quot  foo quot  gt     lt Content     lang  quot foo quot      meta          description  lang foo description            gt   lt  Route gt

User · Answer

Using ES6 you can just make component wrappers inline    lt Route path     component       gt   lt App myProp  someValue   gt    gt   If you need to pass children    lt Route path     component   props    gt   lt App myProp  someValue  gt  props children  lt  App gt    gt

User · Answer

The problem with the React Router is that it renders your components and so stops you passsing in props  The Navigation router  on the other hand  lets you render your own components  That means you don t have to jump through any hoops to pass in props as the following code and accompanying JsFiddle show   var Comments     myProp     gt   lt div gt  myProp  lt  div gt    var stateNavigator   new Navigation StateNavigator      key  comments   route          stateNavigator states comments navigated   function data      ReactDOM render       lt Comments myProp  value    gt       document getElementById  content           stateNavigator start

User · Answer

Here s the cleanest solution I ve come up with  React Router v4     lt Route   path       component  props   gt   lt MyComponent     props  foo  lol    gt     gt    MyComponent still has props match and props location  and has props foo      lol

User · Answer

You can pass props by passing them to  lt RouteHandler gt   in v0 13 x  or the Route component itself in v1 0      v0 13 x  lt RouteHandler  gt   lt RouteHandler someExtraProp  something   gt      v1 0  this props children   React cloneElement this props children   someExtraProp  something        from the upgrade guide at https   github com rackt react-router releases tag v1 0 0   All child handlers will receive the same set of props - this may be useful or not depending on the circumstance

User · Answer

class App extends Component     constructor props       super props        this state           data null              componentDidMount       database ref   on  value    snapshot    gt        this setState          data   snapshot val                         render          const   data     this state   return        lt BrowserRouter gt         lt Switch gt           lt Route exact path       component     LandingPage      gt           lt Route            path   signup             render          gt   lt Signup  data    this state data    gt     gt           lt  Switch gt       lt  BrowserRouter gt                export default App

User · Answer

Wrap it with a stateless function component    lt Router gt     lt Route      path          component    children     gt          lt MyComponent myProp   myVal   gt  children  lt  MyComponent  gt         gt   lt  Router gt

User · Answer

You can also combine es6 and stateless functions to get a much cleaner result   import Dashboard from    Dashboard   import Comments from    Comments    let dashboardWrapper        gt   lt Dashboard     props    gt       commentsWrapper        gt   lt Comments     props    gt       index        gt   lt div gt           lt header gt Some header lt  header gt           lt RouteHandler   gt           this props children       lt  div gt    routes         component  index      path           childRoutes                    path   comments           component  dashboardWrapper                    path   dashboard           component  commentsWrapper

User · Answer

React-router v4 alpha  now there is a new way  to do this  although very similar to the previous method   import   Match  Link  Miss   from  react-router   import Homepage from    containers Homepage    const route         exactly  true      pattern           title     siteTitle  - homepage       component  Homepage       lt Match      route   render   props    gt   lt route component     props    gt     gt    P S  This works only in alpha version   and  were removed after the v4 alpha release  In v4 latest   is once again   with the path and exact props   react-lego an example app contains code that does exactly this in routes js on its react-router-4 branch

User · Answer

Using a custom route component  this is possible in React Router v3    var Dashboard   require    Dashboard    var Comments   require    Comments    var routes        lt Route path     handler  Index  gt       lt MyRoute myprop  value  path  comments  handler  Comments   gt       lt DefaultRoute handler  Dashboard   gt     lt  Route gt       As for the  lt MyRoute gt  component code  it should be something like   import React from  react   import   Route   from  react-router   import   createRoutesFromReactChildren   from  react-router lib  RouteUtils    const MyRoute        gt   lt div gt  amp lt MyRoute amp gt  elements are for configuration only and should not be rendered lt  div gt    MyRoute createRouteFromReactElement    element  parentRoute    gt        const   path  myprop     element props         dynamically add crud route     const myRoute   createRoutesFromReactChildren           lt Route path  path    gt           parentRoute       0          higher-order component to pass myprop as resource to components     myRoute component      children      gt             lt div gt               React Children map children  child   gt  React cloneElement child    myprop               lt  div gt             return myRoute      export default MyRoute    For more details about the custom route component approach  check out my blog post on the subject  http   marmelab com blog 2016 09 20 custom-react-router-component html

User · Answer

You could also use the RouteHandler mixin to avoid the wrapper component and more easily pass down the parent s state as props   var Dashboard   require    Dashboard    var Comments   require    Comments    var RouteHandler   require  react-router modules mixins RouteHandler     var Index   React createClass         mixins   RouteHandler         render  function              var handler   this getRouteHandler   myProp   value             return                lt div gt                   lt header gt Some header lt  header gt                   handler              lt  div gt                      var routes        lt Route path     handler  Index  gt       lt Route path  comments  handler  Comments   gt       lt DefaultRoute handler  Dashboard   gt     lt  Route gt      ReactRouter run routes  function  Handler      React render  lt Handler  gt   document body

User · Answer

You can pass in props via the  lt RouterHandler  gt  like this   var Dashboard   require    Dashboard    var Comments   require    Comments     var Index   React createClass     render  function          var props   this props     or possibly this state     return            lt div gt               lt header gt Some header lt  header gt               lt RouteHandler     props    gt           lt  div gt                   The downside of this is you are passing props indiscriminately  So Comments may end up receiving props that are really intended for a different component depending on your routes configuration  It s not a huge deal since props is immutable  but this can be problematic if two different components are expecting a prop named foo but with different values

User · Answer

If you d rather not write wrappers  I guess you could do this   class Index extends React Component       constructor props        super props         render         return          lt h1 gt          Index -  this props route foo         lt  h1 gt                var routes        lt Route path     foo  bar  component  Index   gt

User · Answer

I have answered this already here  Here are few ways you can pass props to a route component  With the react-router v5  we can create routes by wrapping with a  component  so that we can easily pass props to the desired component like this   lt Route path  quot   quot  gt       lt Home name  quot Sai quot    gt   lt  Route gt   Similarly  you can use the children prop in v5   lt Route path  quot   quot  children    lt Home name  quot Sai quot    gt     gt   If you are using react-router v4  you can pass it using the render prop   lt Route path  quot   quot  render       gt   lt Home name  quot Sai quot    gt     gt    originally posted at https   reactgo com react-router-pass-props

User · Answer

for the react-router 2 5 2 the solution is so easy         someConponent     render function      return        lt h1 gt This is the parent component who pass the prop to this props children lt  h1 gt       this props children  amp  amp  React cloneElement this props children  myProp  value

User · Answer

For react router 2 x   const WrappedComponent    Container  propsToPass    children      gt   lt Container     propsToPass  gt  children  lt  Container gt     and in your routes      lt Route path     component  WrappedComponent bind null  LayoutContainer    someProp     gt   lt  Route gt    make sure the 3rd param is an object like    checked  false

User · Answer

this is probably the best way to use react-router-dom with a cookie handler    in index js   import React    Component   from  react  import  Switch Route Redirect  from  react-router-dom  import  RouteWithLayout  from    cookieCheck   import Login from     app pages login  import DummyLayout from     app layouts dummy  import DummyPage from     app pages dummy    export default   props    gt   return       lt Switch gt           lt Route path   login  component  Login    gt           lt RouteWithLayout path   dummy  layout  DummyLayout  component  DummyPage               props   gt           lt Redirect from      to   login    gt       lt  Switch gt          and use a cookieCheck  import React    createElement  from  react  import  Route Redirect  from  react-router-dom  import  COOKIE getCookie  from     services    export const RouteWithLayout     layout component    rest    gt       if getCookie COOKIE   null return  lt Redirect to   login   gt          return            lt Route     rest  render   props    gt              createElement layout      props     rest   createElement component             props     rest                     gt

User · Answer

This is the solution from Rajesh  without the inconvenient commented by yuji  and updated for React Router 4   The code would be like this    lt Route path  comments  render   props    gt   lt Comments myProp  value      props   gt    gt    Note that I use render instead of component  The reason is to avoid undesired remounting  I also pass the props to that method  and I use the same props on the Comments component with the object spread operator  ES7 proposal

User · Answer

Just a  follow-up to ColCh s answer  It is quite easy to abstract the wrapping of a component   var React   require  react     var wrapComponent   function Component  props      return React createClass       render  function           return React createElement Component  props                    lt Route path  comments  handler  wrapComponent Comments   myprop  value     gt    I haven t tested this solution yet so any feedback is important   It s important to note that with this method  any props sent via the Router  such as params  get overwritten   removed

[javascript] react-router - pass props to handler component

Examples related to javascript

Examples related to properties

Examples related to reactjs

Examples related to react-router

Examples related to higher-order-components