Passing props to component in React Router 4

Question

I am new to react-router and I just started writing an app using react-router V4. I would like to to pass props to components rendered by <Match /> and I am wondering about what's the 'best' or 'proper' way to do so.

Is it by doing something like this?

<Match pattern="/" render={
    (defaultProps) => <MyComponent myProp = {myProp} {...defaultProps} />
}/>

Is this (passing props to components to be rendered by <Match />) even a good practice to do so with react-router or is it an antipattern or something; and if so, why?

score 11 · Answer 1 · answered Sep 06 '17 at 10:29

You must use the render prop instead of component to pass on custom props, otherwise only default Route props are passed ({match, location, history}).

I pass my props to the Router and child components like so.

class App extends Component {

  render() {
    const {another} = this.props
    return <Routes myVariable={2} myBool another={another}/>
  }
}

const Routes = (props) =>
  <Switch>
    <Route path="/public" render={ (routeProps) => 
      <Public routeProps={routeProps} {...props}/>
    }/>
    <Route path="/login" component={Login}/>
    <PrivateRoute path="/" render={ (routeProps) =>
       ...
    }/>
  </Switch>

score 5 · Answer 2 · edited Mar 21 '18 at 10:05

5

render() {
  return (
    <Router history={browserHistory}>
      <Switch>
        <Route path="/" 
           render={ ()  => <Header 
             title={"I am Title"} 
             status={"Here is my status"}
           /> }
        />
        <Route path="/audience" component={Audience}/>
        <Route path="/speaker" component={Speaker}/>
      </Switch>
    </Router>
  )
}

edited Mar 21 '18 at 10:05

Qwerty

29,062
22
108
136

answered Mar 28 '17 at 18:59

im-sunil

434
4
9

Might not relevant to your q? but in react router 4 its work around way to do it till. – im-sunil Mar 28 '17 at 19:19
1

It looks like your comment should be part of your answer. – flaviodesousa Mar 28 '17 at 19:28
Yup,In react router v4 many changes, you would not except it will be work as before used to be. – im-sunil Mar 29 '17 at 21:58

score 1 · Answer 3 · answered Feb 23 '18 at 01:19

1

I'm fairly new to react-router and came across a similar issue. I've created a wrapper based on the Documentation and that seems to work.

// Wrap Component Routes
function RouteWrapper(props) {
  const {component: Component, ...opts } = props

  return (
   <Route {...opts} render={props => (
     <Component {...props} {...opts}/>
   )}/>
 )
}

 <RouteWrapper path='/' exact loggedIn anotherValue='blah' component={MyComponent} />

So far so good

answered Feb 23 '18 at 01:19

falisse

11
2

i tried to implement something similar to this based on another example in github, issues i've had is: a component being rendered when the props are api calls resets the states to empty values – shorif2000 Apr 11 '18 at 12:31

score 0 · Answer 4 · answered Dec 01 '16 at 18:05

0

I use render in combination with a defined method like so:

class App extends React.Component {
  childRoute (ChildComponent, match) {
    return <ChildComponent {...this.props} {...match} />
  }

  render () {
    <Match pattern='/' render={this.childRoute.bind(this, MyComponent)} />
  }
}

answered Dec 01 '16 at 18:05

Marc Greenstock

11,278
4
30
54

You rebind the component every time the render is called. – Qwerty Sep 06 '17 at 10:16

Paul S · Answer 5 · 2017-09-07T04:34:04.643

0

The render prop is meant for writing inline matches, so your example is the ideal way to pass extra props.

edited Sep 07 '17 at 04:34

answered Dec 03 '16 at 06:28

Paul S

35,097
6
41
38

Is is better to use `component` instead of `render` in this case? – Qwerty Sep 06 '17 at 09:49
@Qwerty I just edited my answer to remove that comment. If you are using an inline function, you should also use `render`. Doing that with `component` is really inefficient (you'll be unmounting/mounting a new component every render). – Paul S Sep 07 '17 at 04:34

Pranesh Ravi · Answer 6 · 2016-10-05T10:50:42.133

-1

I'll do it like the following to improve clarity.

const myComponent = <MyComponent myProp={myProp} {...defaultProps} />


<Match pattern="/" component={myComponent} />

By this your router code won't get messed up!.

edited Oct 05 '16 at 10:50

answered Oct 05 '16 at 10:40

Pranesh Ravi

18,642
9
46
70

1

Is this valid? The [documentation](https://react-router.now.sh/Match) says that `render` takes a function while in your example you are passing a component instance – Dimitris Karagiannis Oct 05 '16 at 10:48
My bad! Updated the answer! – Pranesh Ravi Oct 05 '16 at 10:50
Hmm, sorry to ask again, but is this still valid? According to the documentation, `component` takes a component *constructor*, while you are supplying a component instance – Dimitris Karagiannis Oct 05 '16 at 10:54
1

It is valid. They are also passing the compnent. – Pranesh Ravi Oct 05 '16 at 10:55
Whether valid or not, you are passing in a React Element. Not a component or an instance. – kentor Oct 16 '16 at 00:37
@kentor I'm sorry, is there a difference between React element and a component. I think you should read the documentation properly. – Pranesh Ravi Oct 16 '16 at 01:49
Yes: https://facebook.github.io/react/blog/2015/12/18/react-components-elements-and-instances.html We should be very careful to use the right vocabulary – kentor Oct 16 '16 at 03:04
@DimitrisKaragiannis It's not valid. React throwed an exception for me (version 16.2). I also tried to set `component` with a lamda `() => – Mikhail Batcer Jul 06 '18 at 15:57

Passing props to component in React Router 4

6 Answers6

Linked