• How the best frontend router should look like?
• Managing the URL in a Redux app
• On the changes in v2
• Original router code
• React Router's Future to 2.0
• React Router Changes
• React Router Component - Another solution
• rrouter - A newer version
• react-crossroads
• monorouter
• nested-router - New experiment
• A React Router with Hasher?
• Passing props with React Router
• Server-side rendering with React and React Router
• Ryan Florence's and Michael Jackson's brainchild
• React nested router
• Dynamically placed outlets vs Ember portal?
• React Router Overview
• Support React 0.13 GitHub issue
• Passing props to child components

In React Router, unlike Ember, nested route do not correspond to nested URL. It gives you complete freedom of what your URL look like. Just because you nest a route doesn't mean you need to append a segment to the URL to match.

Routing is just data: location.hash.substr(1)

• Original React Router code by Ryan Florence
• Fluxxor React Router Guide
• Does Relay routing replace react-router?
• Support React version 0.13 #638
• Server-side rendering landed in React Router
• react-router vs react-router-component

• You might not need react-router
• You Don’t Need React-Router
• crossroads.js
• sheet-router
• wayfarer
• page.js
• history.js
• path-to-regexp
• navigation - the data-first JavaScript router

• Kitematic routes
• Percolate Studio's routes file
• You can use react-async if you want to fetch XHR before perform a route switch. Like blurring the list view before switching or abort.
• RequelPro

Nested route is nested UI. You should only nest your routes if your UI is nested. - From Ember

1. You declare your view hierarchy with nested <Route />
2. React Router will match the deepest route against the URL and activate the entire tree of routes on that branch, nesting all the UI.
3. You simply use the this.props.children and it will render the active child route.

const routes = (
  <Route path="/" component={App}>
    <IndexRoute component={Dashboard} />
    <Route path="/inbox" component={Inbox} />
    <Route path="calendar" component={Calendar} />
  </Route>
)

ReactDOM.render(
  <Router history={browserHistory}>{routes}</Router>,
  document.getElementById('app')
)

Whenever a hash change, a callback will be called. This callback is being registered and setup at Router.run(). It just pass in a Handler to be inserted into the view's <RouteHandler />.

It is just like the {{outlet}} in Ember. You can have multiple this.props.children or even named components?

Think of Router as describing your interface rather than a URL structure. Routes are completely independent from the URL of API resources. Even if your API URLs are nested, it does not necessarily mean that your React routes should be.

<Router> and <Route> are 2 different things, even though they are technically React components, but they don't actually create DOM themselves.

It may help to think of a <Route> as an "entry point" into your UI. You don't need a route for every component in your component hierarchy, only for those places where your UI differs based on the URL.

If a route uses a relative path, it builds upon the accumulated path of its ancestors. Nested routes may opt-out of this behavior by using an absolute path.

Explicit static paths match more closely than dynamic paths.

transition.redirect('/login');
transition.retry();
transition.abort();

Normal HTML link will cause a refresh. Use instead.

<Link to="/home" activeClassName="active" onlyActiveOnIndex>Home</Link>

<IndexLink activeStyle={{color: blue}}>Home</IndexLink>

<Link to={{
  pathname: '/jobs',
  query: { page: '12' }
}}>Page 1</Link>

this.props.params
this.props.location.query

// e.g.
this.props.params.address
this.props.location.query.page

• Welcome to Future of Web App Delivery
• example-react-router-server-rendering-lazy-routes

You no need to define your entire route config up front anymore as 1.0 brings first-class support for code-splitting on routes so that adding routes deep in your app doesn't increase the size of the initial bundle.

• Rex, Rexical and Rails routing
• Aaron Patterson - Journey