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
React Router Github
Thanks!
Questions?
React Router DCU Tech Week
By Robert Campion
React Router DCU Tech Week
Quick intro into React Router
- 768