How to pass props into a react-router with ReactJS (and react-router)

Question

I have this snippet of code that toggles between different components. I would like to pass values down to the different components in an easy way, like this;

<Route path="student" component={Student} websocket={self.websocket}/>

Is there an easy way of doing this? I have looked at cloning classes etc, but I don't think those answers are "good enough" I guess. I haven't found a similar situation and hope someone can answer my question.

The code in "full";

ReactDOM.render(
<Router history={browserHistory}>
  <Route path="/" component={App}>
    <Route path="student" component={Student}/>
    <Route path="about" component={About}/>
    <Route path="login" component={LoginForm}/>
    <Route path="oauth" component={Knapp}/>
  </Route>
</Router>, document.getElementById("container") );

The Reason · Accepted Answer · 2016-03-01 10:41:30Z

1

You can do something like this

class Example extends React.Component { 
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <h1>
        Checking props - {this.props.route.foo}
      </h1>
    );
  }

}

var routes = (
  <Route path="/" foo="bar" component={Example}/>
);

Also you can look here how to do it in another way

I hope it will help you Thanks

answered Mar 1, 2016 at 10:41

The Reason

8,0135 gold badges27 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Thomas Darvik Over a year ago

Yeah, good suggestion. I can't really make it work like this, not sure why, but every time I pass in an object or anything other than a string, I get "undefined" in the Student-component. I will however, look more into this. Thank you for your answer.

Thomas Darvik Over a year ago

In other words, your answer probably works for other people!

Collectives™ on Stack Overflow

How to pass props into a react-router with ReactJS (and react-router)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related