React Router

In notebook:
FrontEndMasters React
Created at:
2016-06-17
Updated:
2016-06-21
Tags:
libraries React JavaScript
You want some extra features:
  • handle transitions
  • ability to cancel them (moving from one page to another)
  • redirect somewhere else
  • create links simpler than the previous example
  • AND nested UIs (the biggest)

Nested UI

They usually match very well to nested URLs as well. 
(shows docs on Github docs/guides/overview.md – not on github anymore)
Imagine an inbox tab that has more widgets inside it. 

React router helps to simplify this and just define them in router config.
Shows master-detail example on GitHub (current version is different from what he’s showing)
  ..

var routes = {
  <Route handler={App}>
    <DefaultRoute handler={Index}/>
    <Route name="new" path="contact/new" handler={NewContact}/>
    <Route name="new" path="contact/:id" handler={Contact}/>
    <NotFoundRoute handler={NotFound}/>
  </Route>
};

Router.run(routes, function (Handler){
  React.render(<Handler/>, document.getElementById('example'));
});
then above, in his app if he want to render a child UI element:
  ..

  <div className="Content">
    <RouteHandler/>
  </div>
..
The router automatically figures out what is the child route a what’s the related view. It’s like ​ng-view​ in Angular. 
​RouteHandler​ is basically doing this for you (from the above example).
It figures out which page to go to.
  var App = React.createClass({
  render () {
    var pages = {
      'foo': <div>Foo</div>,
      'bar': <div>Bar</div>
    };
    var RouteHandler = page[this.props.route];
    
    return {
      <div>
        <a href="#foo">Foo</a> {' '}
        <a href="#bar">Bar</a> 
        {RouteHandler}
      </div>
    }
  }
});
But contrary to the above example, it does multiple levels of nesting (if ​foo​ has some child UIs)

Runs the example from GitHub. 
You can use the History API so you don’t need the hash in the url.
We don’t have to check inside the components the url. For example if it matches something so that inside our component we have to render something or not. 
- What does the name property do?
reminder: ​<Route name=“new" path="contact/new" handler={NewContact}/>​
just for convenience: now you can:
​<li><link to=“new” params={{userID: “123”}}>Bob</link></li>
So you don’t have to know the URL the user is at. Just the name of the route. And it will in the URL path ​path=“contact/:userID”​ 
This also lets you change your routes, and your links will still point to the right route.