Slide 1
Slide 1 text
React Router
Introduction to
Slide 2
Slide 2 text
Guil Hernandez
@guilh
Designer
Front End Dev
Teacher
Slide 3
Slide 3 text
Guil Hernandez
@guilh
Slide 4
Slide 4 text
This Session
Routing Basics
Declaring and Navigating Routes
Nested Routes
Passing params and props
Tips & New Features
Slide 5
Slide 5 text
what’s Routing?
Slide 6
Slide 6 text
Routing
Matches a URL to what’s being rendered in the browser — it does
something in response to a change in the current URL
Slide 7
Slide 7 text
Routing in SPAs
Loads and unloads content as users navigate the app, without
reloading the page
Slide 8
Slide 8 text
Routing in React
Mounts and unmounts components while matching the URL with
the set of components being rendered
Slide 9
Slide 9 text
Routing Should:
• Keep track of browser history
• Seamlessly link users to specific sections of your app
• Be consistent with the navigation experience of regular multi-
page sites and apps
Slide 10
Slide 10 text
Custom router
class App extends Component {
state = {
route: window.location.hash
};
componentDidMount() {
window.addEventListener('hashchange', () => {
this.setState({
route: window.location.hash.substr(1)
});
});
}
…
}
// App.js
Slide 12
Slide 12 text
Routing
As your app grows and you add more routes, your routing code
will also grow in complexity
Slide 13
Slide 13 text
Example hierarchy
Slide 14
Slide 14 text
Hey, React Router!
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
Install
$ npm install --save react-router
Slide 18
Slide 18 text
React Router
• A set of components
• You write routes using JSX
• Easier to visualize how your routes are structured
Slide 19
Slide 19 text
Three main components
import { Router, Route, Link } from 'react-router';
, Route, Link
Router
Slide 20
Slide 20 text
Router
import React from 'react';
import { Router } from 'react-router';
import Home from './components/Home';
ReactDOM.render((
), document.getElementById('root'));
// index.js
Slide 21
Slide 21 text
Declaring a route
import React from 'react';
import { Router, Route } from 'react-router';
import Home from './components/Home';
ReactDOM.render((
), document.getElementById('root'));
// index.js
Slide 22
Slide 22 text
Declaring a route
import React from 'react';
import { Router, Route } from 'react-router';
import Home from './components/Home';
ReactDOM.render((
), document.getElementById('root'));
// index.js
Slide 23
Slide 23 text
You'll experience the true power of React Router when
working with multiple routes!
Slide 24
Slide 24 text
Declaring multiple routes
…
import Home from './components/Home';
import Courses from './components/Courses';
import Teachers from './components/Teachers';
ReactDOM.render((
), document.getElementById('root'));
// index.js
Slide 25
Slide 25 text
Declaring multiple routes
…
import Home from './components/Home';
import Courses from './components/Courses';
import Teachers from './components/Teachers';
ReactDOM.render((
), document.getElementById('root'));
// index.js
Slide 26
Slide 26 text
URLs
localhost:8080/#/?_k=xgx3js
Slide 27
Slide 27 text
History
• Listens for changes in the URL
• Provides information about which components to render
• Lets users navigate using back and forward buttons
• Keeps the UI in sync with the URL
Slide 28
Slide 28 text
URLs
localhost:8080/#/teachers?_k=ut968k
Slide 29
Slide 29 text
browserHistory
Leverages the History API built into the browser displays clean,
user-friendly URLs
Slide 30
Slide 30 text
browserHistory
import React from 'react';
import { Router, Route, browserHistory } from 'react-router';
…
ReactDOM.render((
), document.getElementById('root'));
// index.js
, browserHistory
Slide 31
Slide 31 text
URLs
localhost:8080/
localhost:8080/teachers
localhost:8080/courses
Slide 32
Slide 32 text
DevTools
Slide 33
Slide 33 text
Navigating Routes
Slide 34
Slide 34 text
Navigate with Link
class App extends Component {
render() {
return (
);
}
}
// App.js
…
import { Link } from 'react-router';
- Home
- Teachers
- Courses
Slide 35
Slide 35 text
Active link styles
class App extends Component {
render() {
return (
);
}
}
// App.js
…
import { Link } from 'react-router';
- Home
- Teachers
- Courses
Slide 36
Slide 36 text
Active link styles
class App extends Component {
render() {
return (
);
}
}
// App.js
…
import { Link } from 'react-router';
- Home
- Teachers
- Courses
Slide 37
Slide 37 text
Wrapper component
import React from 'react';
import { Link } from 'react-router';
const NavLink = props => (
);
export default NavLink;
// NavLink.js
Slide 38
Slide 38 text
Wrapper component
class App extends Component {
render() {
return (
);
}
}
// App.js
import NavLink from './NavLink';
- Home
- Teachers
- Courses
Slide 39
Slide 39 text
Nested Routes
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
Nested Routes = Nested Views
Slide 42
Slide 42 text
Component hierarchy
Slide 43
Slide 43 text
Nesting
// index.js
ReactDOM.render((
), document.getElementById('root'));
Slide 44
Slide 44 text
Nesting
// App.js
class App extends Component {
render() {
return (
);
}
}
{ this.props.children }
- Home
- Teachers
- Courses
Slide 45
Slide 45 text
Nested routes
URL Component
/ App -> Home
/teachers App -> Teachers
/courses App -> Courses
Slide 46
Slide 46 text
Nesting deeper
// index.js
ReactDOM.render((
Route path="/teachers" component={Teachers} />
<
/Route>
), document.getElementById('root'));
Slide 47
Slide 47 text
Nesting deeper
URL Component
/courses/html App -> Courses -> HTML
/courses/css App -> Courses -> CSS
/courses/javascript App -> Courses -> JS
Slide 48
Slide 48 text
Passing Props
Slide 49
Slide 49 text
When you pass props to , props can be used in the
component rendered by that route.
Slide 50
Slide 50 text
Passing props
…
ReactDOM.render((
), document.getElementById('root'));
// index.js
Slide 51
Slide 51 text
Route props are available in component as this.props.route
Slide 52
Slide 52 text
Accessing route props
// Home.js
class Home extends Component {
render() {
return (
);
}
}
.title
{ this.props.route.title }
… s.prSlide 53
Slide 53 text
Passing data as props
ReactDOM.render((
Route path="/teachers" component={Teachers} />>
), document.getElementById('root'));
…
…
// index.js
import CourseContainer from './CourseContainer';
import CourseList from './data';
Slide 54
Slide 54 text
Rendering content
// CourseContainer.js
class CourseContainer extends Component {
render() {
let courseList = this.props.route.data;
let courses = courseList.map((course) => {
return
…
});
return (
{ courses }
s.pr
);
}
}
Slide 55
Slide 55 text
Parameters
Slide 56
Slide 56 text
Route Matching
Route Path Matched URL
"/" root
"/courses" ../courses
"/teachers" ../teachers
Slide 57
Slide 57 text
Declare routes that match anything in a URL's path, using
special route parameters
Slide 58
Slide 58 text
Defining parameters
ReactDOM.render((
Route path="/teachers" component={Teachers} />>
), document.getElementById('root'));
…
// index.js
…
import Featured from './Featured';
Slide 59
Slide 59 text
Route Matching
Route Path Matched URL
featured/:topic/:name
/featured/javascript/james
/featured/css/alena
/featured/whatevs/whoevs
Slide 60
Slide 60 text
You can use what's passed through parameters as data in
your components with this.props.params
Slide 61
Slide 61 text
Rendering params
…
const Featured = props =>
{props.params.name} enjoys teaching {props.params.topic}!
export default Featured; // Featured.jsSlide 62
Slide 62 text
Rendering params
…
Jay Query
// Teachers.js
Slide 63
Slide 63 text
Rendering params
Jay enjoys teaching JavaScript!
Slide 64
Slide 64 text
More Features & Tips!
Slide 65
Slide 65 text
“404” error route
ReactDOM.render((
="/teachers" component={Teachers} />>
), document.getElementById('root'));
// index.js
…
import NotFound from './NotFound';
Slide 66
Slide 66 text
Route redirect
// index.js
ReactDOM.render((
Route path="/teachers" component={Teachers} />
<
/Route>
), document.getElementById('root'));
<
Route path="/javascript" component={JS} />
…
import { Router, Route, browserHistory, IndexRedirect } from 'react-router';
Slide 67
Slide 67 text
Route redirect
Path Redirect URL
"/courses" ../courses/html
Slide 68
Slide 68 text
As you add more routes, it’s easier to work with routing if
you move routes into their own file.
Slide 69
Slide 69 text
Organizing routes
const routes = (
);
export default routes;
//router.js
Slide 70
Slide 70 text
Organizing routes
//index.js
…
import routes from './router';
ReactDOM.render(
routes,
document.getElementById('root')
);
routes,
Slide 71
Slide 71 text
React Router v4 H
Slide 72
Slide 72 text
No content
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
If you know React, you're going to know React Router v4
Slide 75
Slide 75 text
Install
$ npm install react-router@next
Slide 76
Slide 76 text
v4 Components
• BrowserRouter
• Match
• Link
• Miss
• Redirect
Slide 77
Slide 77 text
Location & Match
• Location: Data representing where a visitor is (or wants to go)
in your app
• Match: Turns a location into UI
Slide 78
Slide 78 text
Declare routes from anywhere!
…
import App from './App';
ReactDOM.render(
,
document.getElementById('root')
);
// index.js
Slide 79
Slide 79 text
BrowserRouter
// App.js
import { BrowserRouter } from 'react-router';
class App extends Component {
render() {
return (
);
}
}
Course App
- …
…
Slide 80
Slide 80 text
Match a URL path to a component
// App.js
import { BrowserRouter, Match } from 'react-router';
class App extends Component {
render() {
return (
);
}
}
Course App
- …
…
Slide 81
Slide 81 text
Match a URL path to a component
// App.js
…
Slide 82
Slide 82 text
Match a URL path to a component
// App.js
…
Slide 83
Slide 83 text
Match only if pattern matches path exactly
// App.js
…
Slide 84
Slide 84 text
Nested routes
// App.js
…
class App extends Component {
render() {
return (
);
}
}
Course App
- …
…
Slide 85
Slide 85 text
Nested routes
URL Component
/ App -> Home
/teachers App -> Teachers
/courses App -> Courses
Slide 86
Slide 86 text
If it’s not a Match, it's a Miss…
Slide 87
Slide 87 text
Render a miss
// App.js
…
Slide 88
Slide 88 text
In v4:
• Still use to navigate
• Pass URL params just like in v3.0
Slide 89
Slide 89 text
URL params
…
// App.js
Slide 90
Slide 90 text
Passing props
} />
…
// App.js
Slide 91
Slide 91 text
Passing props
} />
} />
} />
…
// Courses.js
Slide 92
Slide 92 text
Use pathname for patterns & relative links
const Courses = ({ pathname }) => (
);
// Courses.js
Courses
- HTML
- CSS
- JavaScript
Slide 93
Slide 93 text
Route redirects
const Courses = ({ pathname }) => (
);
// Courses.js
Courses
- …
Slide 94
Slide 94 text
Route redirects
Path Redirect URL
"/courses" ../courses/html
Slide 95
Slide 95 text
No content
Slide 96
Slide 96 text
Migrating to v4
• Move route configuration to your component render methods
• Change to
• Change path to pattern
Slide 97
Slide 97 text
Find what works for you, your project and your team.
Develop a style and approach and be consistent about it.
Slide 98
Slide 98 text
Guil Hernandez
@guilh
Thanks!