React Router Intro

Rob Campion @robertcampion

What is routing?

Map of your app

URL (address)          View

View           URL

Routers

Not a new concept

Traffic directing

Web Routers

URL      Show view

Apache

Alias /home /var/web/home
Alias /about /var/web/about

Redirect permanent /foo/ http://www.ex.com/bar/

Java (Spring)

<servlet>
  <servlet-name>example</servlet-name>
  <servlet-class>com.servlet.DispatcherServlet</servlet-class>
</servlet>

<servlet-mapping>
  <servlet-name>example</servlet-name>
  <url-pattern>/example/*</url-pattern>
</servlet-mapping>

Angular

phonecatApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/phones', {
        templateUrl: 'partials/phone-list.html',
        controller: 'PhoneListCtrl'
      }).
      when('/phones/:phoneId', {
        templateUrl: 'partials/phone-detail.html',
        controller: 'PhoneDetailCtrl'
      }).
      otherwise({
        redirectTo: '/phones'
      });
  }]);

React Router

<Router history={createHistory()}>
  <Route path="/example" component={Application}>
    <IndexRoute component={HomePage} />
    <Route path="blog" component={BlogPage}/>
    <Route path="about" component={AboutPage}/>
  </Route>
</Router>

Routing

Why is it important?

Memorable to users

A well defined URL is...

Bookmarkable/shareable

Improves SEO

Nice blueprint for devs

  • Started in 2014
     

  • Inspired by Ember's router
     

  • v1 - November 2015
     

  • Non facebook project
     

  • De facto React routing lib

Examples

1. Simple

2. Pages

3. Route not found

4. Passing params

5. Embedded pages

6. Redirects

7. Extras

Resources

Thanks!

Questions?

React Router Intro

By Robert Campion

React Router Intro

Quick intro into React Router

  • 1,194