javascript - Passing props to component in React Router 4 - Stack Overflow

admin管理员组

文章数量:1181478

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?

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?

• javascript
• reactjs
• react-router

Share Improve this question Follow edited Oct 5, 2016 at 11:08 Dimitris Karagiannis asked Oct 5, 2016 at 10:35 Dimitris KaragiannisDimitris Karagiannis 9,35899 gold badges4444 silver badges7373 bronze badges 1

• looks good for me. – Steeve Pitis Commented Oct 5, 2016 at 10:38

Add a comment  | 

6 Answers 6

Sorted by: Reset to default 11

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>

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

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

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

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

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!.

本文标签： javascriptPassing props to component in React Router 4Stack Overflow