Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

How would I pass props from a parent route to the children in 1.0.0-beta2 #1369

Closed
duro opened this issue Jun 20, 2015 · 6 comments
Closed

How would I pass props from a parent route to the children in 1.0.0-beta2 #1369

duro opened this issue Jun 20, 2015 · 6 comments

Comments

@duro
Copy link

duro commented Jun 20, 2015

My "App" component computes some values based on the window, and then passes them down to the child routes. In 0.13 I would just do this

<RouteHandler appState={this.state} />

But now that we use this.props.children to inject the child route into the parent, I'm a little uncertain how to accomplish the same thing.
@agundermann
Copy link
Contributor

React.cloneElement

React.cloneElement(this.props.children, { appState: this.state });

There's also <Router createElement> to inject props from outside.

@duro
Copy link
Author

duro commented Jun 20, 2015

@taurose, so <Router createElement> is a kind of global that gets called every time a child route is created?

@agundermann
Copy link
Contributor

Yeah, you can use it to pass props to all your route handlers. You can also access the component class and the route state to make decisions.

http://rackt.github.io/react-router/tags/v1.0.0-beta2.html#Router

@duro
Copy link
Author

duro commented Jun 20, 2015

Cool, I used cloneElement and it worked as expected.

@duro duro closed this as completed Jun 20, 2015
@ftorre104
Copy link

I've been look around all over, but haven't been able to figure it out.

serverApp.get('/*', function(req, res) {
  match({routes: AppRoutes, location: req.url},
    (error, redirectLocation, renderProps) => {
      var markup;

      if (error) {
        res.status(500).send(error.message);
      } else if (redirectLocation) {
        res.redirect(302, redirectLocation.pathname + redirectLocation.search);
      } else if (renderProps) {
        var myApp = React.cloneElement(<RoutingContext {...renderProps} />, {myProps: 'OK'});
        markup = renderToString(myApp);
        res.status(200).send('<!DOCTYPE html>' + markup);
      } else {
        res.status(404).send('Not found');
      }
    }
  );
});

This is what I thought should work, but having no success logging out the prop in the render method of the component.

Any ideas on what I'm doing wrong here?
Much appreciated.

@taion
Copy link
Contributor

taion commented Nov 29, 2015

Thanks for your question!

We want to make sure that the GitHub issue tracker remains the best place to track bug reports and feature requests that affect the development of React Router.

Questions like yours deserve a purpose-built Q&A forum. Would you like to post this question to Stack Overflow with the tag #react-router? https://stackoverflow.com/questions/ask?tags=react-router.

We also have an active and helpful React Router community on Reactiflux, which is a great place to get fast help with React Router and with the rest of the React ecosystem. You can join at https://discord.gg/0ZcbPKXt5bYaNQ46.

@lock lock bot locked as resolved and limited conversation to collaborators Jan 22, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@duro @agundermann @ftorre104 @taion