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

Simple

/app  Load 'Application' view

Pages

/app  HomePage

/app/blog BlogPage
/app/about
AboutPage

Route not found

* (not defined)   Page404

Passing params

/app/blog/123   BlogPage

Embedded pages

/app/about/popcorn   PopcornPage
/app/about/football  FootballPage

Redirects

/app/about/soccer   SoccerPage

/app/about/football  SoccerPage

Resources

Thanks!

Questions?

React Router DCU Tech Week

By Robert Campion

React Router DCU Tech Week

Quick intro into React Router

  • 715