reactjs – How do I pass state through React_router?

reactjs – How do I pass state through React_router?

tl;dr your best bet is to use a store like redux or mobx when managing state that needs to be accessible throughout your application. Those libraries allow your components to connect to/observe the state and be kept up to date of any state changes.

What is a <Route>?

The reason that you cannot pass props through <Route> components is that they are not real components in the sense that they do not render anything. Instead, they are used to build a route configuration object.

That means that this:

<Router history={browserHistory}>
  <Route path=/ component={App}>
    <Route path=foo component={Foo} />
  </Route>
</Router>

is equivalent to this:

<Router history={browserHistory} routes={{
  path: /,
  component: App,
  childRoutes: [
    {
      path: foo,
      component: Foo
    }
  ]
}} />

The routes are only evaluated on the initial mount, which is why you cannot pass new props to them.

Static Props

If you have some static props that you want to pass to your store, you can create your own higher order component that will inject them into the store. Unfortunately, this only works for static props because, as stated above, the <Route>s are only evaluated once.

function withProps(Component, props) {
  return function(matchProps) {
    return <Component {...props} {...matchProps} />
  }
}

class MyApp extends React.Component {
  render() {
    return (
      <Router history={browserHistory}>
        <Route path=/ component={App}>
          <Route path=foo component={withProps(Foo, { test: ing })} />
        </Route>
      </Router>
    )
  }
}

Using location.state

location.state is a convenient way to pass state between components when you are navigating. It has one major downside, however, which is that the state only exists when navigating within your application. If a user follows a link to your website, there will be no state attached to the location.

Using A Store

So how do you pass data to your routes components? A common way is to use a store like redux or mobx. With redux, you can connect your component to the store using a higher order component. Then, when your routes component (which is really the HOC with your route component as its child) renders, it can grab up to date information from the store.

const Foo = (props) => (
  <div>{props.username}</div>
)

function mapStateToProps(state) {
  return {
    value: state.username
  };
}

export default connect(mapStateToProps)(Foo)

I am not particularly familiar with mobx, but from my understanding it can be even easier to setup. Using redux, mobx, or one of the other state management is a great way to pass state throughout your application.

Note: You can stop reading here. Below are plausible examples for passing state, but you should probably just use a store library.

Without A Store

What if you dont want to use a store? Are you out of luck? No, but you have to use an experimental feature of React: the context. In order to use the context, one of your parent components has to explicitly define a getChildContext method as well as a childContextTypes object. Any child component that wants to access these values through the context would then need to define a contextTypes object (similar to propTypes).

class MyApp extends React.Component {

  getChildContext() {
    return {
      username: this.state.username
    }
  }

}

MyApp.childContextTypes = {
  username: React.PropTypes.object
}

const Foo = (props, context) => (
  <div>{context.username}</div>
)

Foo.contextTypes = {
  username: React.PropTypes.object
}

You could even write your own higher order component that automatically injects the context values as props of your <Route> components. This would be something of a poor mans store. You could get it to work, but most likely less efficiently and with more bugs than using one of the aforementioned store libraries.

What about React.cloneElement?

There is another way to provide props to a <Route>s component, but it only works one level at a time. Essentially, when React Router is rendering components based on the current route, it creates an element for the most deeply nested matched <Route> first. It then passes that element as the children prop when creating an element for the next most deeply nested <Route>. That means that in the render method of the second component, you can use React.cloneElement to clone the existing children element and add additional props to it.

const Bar = (props) => (
  <div>These are my props: {JSON.stringify(props)}</div>
)

const Foo = (props) => (
  <div>
    This is my child: {
      props.children && React.cloneElement(props.children, { username: props.username })
    }
  </div>
)

This is of course tedious, especially if you were to need to pass this information through multiple levels of <Route> components. You would also need to manage your state within your base <Route> component (i.e. <Route path=/ component={Base}>) because you wouldnt have a way to inject the state from parent components of the <Router>.

I know this might be late to answer this question, however for anybody that wonders about this in future, you can do this example way:

export default class Routes extends Component {
constructor(props) {
    super(props);
    this.state = { config: http://localhost };
}
render() {
    return (
        <div>
            <BrowserRouter>
                <Switch>
                    <Route path=/ exact component={App} />
                    <Route path=/lectures exact render={() => <Lectures config={this.state.config} />} />
                </Switch>
            </BrowserRouter>
        </div>
    );
}

}

This way you can reach config props inside Lecture component.
This is a little walk around the issue but for a start its a nice touch! 🙂

reactjs – How do I pass state through React_router?

You can not change the state of the React-router once the router component is mounted. You can write your own HTML5 route component and listen for the url changes.

class MyRouter extend React.component {
   constructor(props,context){
   super(props,context);
   this._registerHashEvent = this._registerHashEvent.bind(this)

 } 

 _registerHashEvent() {
    window.addEventListener(hashchange, this._hashHandler.bind(this), false);
  }
  ...
  ...

render(){
  return ( <div> <RouteComponent /> </div>)
}

Leave a Reply

Your email address will not be published.