Routing questions

In notebook:
FrontEndMasters React
Created at:
2016-06-17
Updated:
2016-06-21
Tags:
libraries React JavaScript
- do you declare routes from the child to the parent
- no, you declare all the routes on the top. it’s all static, no dynamic routing at runtime

- does it support server side routing?
- yes, totally. Demoes a heroku app. Even works without JavaScript (all routing on the server). Can enter at any url the site. react-router-mega-demo.herokuapp.com

Working on the Facebook team on how to bring React-router to React native. On Android the back button doesn’t give a full url only a diff.

- How does it handle CSS transitions between nested routes?
React has a feature css transition group: 
  render: function () {
  ..
  retrun (
    <div>
      <ul>
        ..
      </ul>
    </div>
    <TransitionGroup component="div" transitionName="example">
      <RouterHandler key={name}/>
    </TransitionGroup>
  )
}
Animating elements between the routes is the same as animating components between states. - Does the router have life-cycle hooks to override global actions before and after entering a route?
There’s ​Router.run.​ It [Router.run] listens to the URL changes and gets called. 
  Router.run(routes, function(Handler, state){
  // can also use the state variable
  // for example:
  loadingEvents.emit('loadStart'); // emit an event before render
  // fetch data using the state properties
  fetchData(state.route, state.params).then((data) => {
    // emit an event after data loaded
    loadingEvents.emit('loadEnd'); 
    React.render(<Handler data={data}/>, document.getElementById('example'));
  })
})
the ​state​ variable gives parameters from the url, the query from the url, and the matched branch url. The second life-cycle hook is an official transition hook (see transitions example on the repo). 
  var Form = React.createClass({
  render: function () {..},
  
  mixins: ..
  
  statics: {
    willTransitionFrom: function (transition, element) {
      if(element.refs.userInput.getDOMNode().value !== '') {
        if(!confirm("You have unsaved information"))
          transition.abort();
      }
    }
  },
  ..
})
​statics​ in React will make (equivalent to): ​Form.willTransitionFrom​ Shows another example, that works with Authentication
  ..
var Authentication = {
  statics {
    willTransitionTo: function (transition) {
      if(!auth.loggedIn()){
        // if not logged in, save the transition
        Login.attemptedTransition = transition;
        // then redirect to login
        transition.redirect('/login');
      }
    }
  }
};
​login.attemptedTransition​ is used in ​auth.login​. If it exists the user is transferred to that “page” (​Login.attemptedTransition.retry()​). This also works great with the browser back button. When he clicked the back button (after authentication) he didn’t go back to the login page but to the page before he had to authenticate.