Expose child component functions to parent with ref using react-router

Question

This link describes how you can set a ref on a component and call its functions from a parent: https://facebook.github.io/react/tips/expose-component-functions.html

How do i achieve this when i'm using react-router and the component I want to ref is a route and the parent is the root component?

user2827377 · Accepted Answer · 2015-07-20 01:28:36Z

1

This works: Give <RouteHandler/> a ref, like this: <RouteHandler ref="routerHandler"/>

Then call like this: this.refs.routerHandler.refs.__routeHandler__.someFunctionOnActiveRoutesHandler()

answered Jul 20, 2015 at 1:28

user2827377

1,3812 gold badges16 silver badges27 bronze badges

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

2 Comments

Any idea what the react-router 2.x equivalent of this is?

React Router 2.0 gives you this.props.children. Use this approach to get a ref: stackoverflow.com/questions/29568721/…, and this approach to call a function: facebook.github.io/react/tips/expose-component-functions.html. Keep in mind this is an anti-pattern.