Pass props through route

Question

In react how can I configure a route to pass props. for example my route.tsx is:

export const routes = () => (
  <Layout>
    <Route exact path='/' component={ Home } />
    <Route path='/counter' component={ Counter } />
    <Route path='/fetchdata' component={ FetchData } />
  </Layout>
);

How can I pass some data as props to my Counter component when ever /counter is evoked

Possible duplicate of [Passing custom props to router component in react-router v4](https://stackoverflow.com/questions/44255415/passing-custom-props-to-router-component-in-react-router-v4) — StackedQ, May 22 '18 at 14:27

score 12 · Accepted Answer · edited Sep 06 '18 at 11:32

12

You can use the render prop.

  <Route 
     path='/counter' 
     render={(props) => (
       <Counter {...props} count={5} />
     )} 
  />

edited Sep 06 '18 at 11:32

Soroush Chehresa

5,490
1
14
29

answered May 22 '18 at 14:24

Omar

3,401
2
23
40

Harshal Yeole · Answer 2 · 2018-05-22T14:57:50.920

8

This will do the work: Render

    <Route
      path='/dashboard'
      render={(props) => <Dashboard {...props} isAuthed={true} />}
    />

Hope this helps!

edited May 22 '18 at 14:57

answered May 22 '18 at 14:28

Harshal Yeole

4,812
1
21
43

if OP doesnt need the router props he doesnt need to pass {...props} – Omar May 22 '18 at 14:31
Correct, that's just an example. – Harshal Yeole May 22 '18 at 14:32

user1034533 · Answer 3 · 2019-03-16T18:35:23.323

As noted in other answers, this is handled by the render prop, which gives the example:

<Route path="/home" render={() => <div>Home</div>}/>

However, I (and many others) find this syntax pretty ugly. In the original issue on prop passing with Route, there's a well-liked wrapper which I wanted to surface, I've made some improvements and propose this terse and effective wrapper:

const PropsRoute = ({component, path, ...otherProps}) => (
  <Route {...otherProps} path={path} render={routeProps => 
      React.createElement(component, {...otherProps, ...routeProps})
    } />
)

This can be used as might be expected:

<Router>
   <main>
     <PropsRoute exact path="/" component={Home} auth={this.state.auth} />
   </main>
</router>

Note that doing this will pass the Route props down to the component. Any prop passed to Route that isn't 'component' or 'path' will be passed down to the component. In this formulation, any routeProps (passed by the react-router) will override custom props passed via this syntax.

This can then be quite easily expanded on to make the common login pattern:

const AuthedRoute = ({auth, ...props}) =>
  !auth.valid()? <Redirect to="/login" />: <PropsRoute {...{...props, auth: auth}} />;

Edit: I've largely abandoned this approach as of 2019, in favour of something like this:

<Route {...{
    path: "/path/to/component",
    render: ({ location }) => <MyComponent {...{
        location
    }}/>
}}/>

This can appear a bit more gnarly, but it makes deeply nested render trees much clearer, and lets you use full Javascript in your JSX parameters.

There is problem. Refresh page on every click. – Fatih Hayrioğlu Mar 15 '19 at 11:39 — Fatih Hayrioğlu, Mar 15 '19 at 11:39

score 0 · Answer 4 · answered Aug 16 '18 at 10:31

To simplify things you could create a wrapper around <Route>:

const RouteWrapper = ({ children, ...props }) => {
    const childrenWithProps = props => React.Children.map(children, child => React.cloneElement(child, { ...props }))}
    return <Route {...props} render={childrenWithProps} />
}

Usage:

<RouteWrapper
    exact
    path="/">
    <Component myProp={38} />
</RouteWrapper>

Pass props through route

4 Answers4