React Router: React Meetup XXL

React Router
React Meetup XXL - September 23, 2015
-Rob Gietema @robgietema

Routing url to React Component
Route /aboutto <About />
Route /user/1234to <User />
Route /user/1234?message=Hito <User />

Michael Jackson & Ryan Florence

2.002 commits
53 releases
197 contributors
180k downloads / month

Simple example
import { Route } from 'react-router';
const routes = (
<Route handler={App} path="/">
<Route name="about" handler={About} />
</Route>
);
About page is available at /about

Using custom path
const routes = (
<Route name="about" path="my-about" handler={About} />
</Route>
);
About page is available at /my-about

Default route
import { Route, DefaultRoute } from 'react-router';
const routes = (
<DefaultRoute handler={Home} />
</Route>
);
Home is available at /

Not found route
import { Route, NotFoundRoute } from 'react-router';
const routes = (
<NotFoundRoute handler={NotFound}/>
</Route>
);

Nesting
const routes = (
<Route name="users" handler={Users}>
<Route name="recent-users" path="recent"
handler={RecentUsers} />
</Route>
</Route>
);
Recent users available at /users/recent

Params
const routes = (
<Route name="user" path="/user/:userId" handler={User} />
</Route>
</Route>
);
User 1234is available at /user/1234

Multiple params
const routes = (
<Route name="user-message"
path="/user/:userId/message/:messageId"
handler={User} />
</Route>
</Route>
);
Example /users/123/message/456

Redirect routes
import { Route, Redirect } from 'react-router';
const routes = (
<Redirect from="company" to="about" />
</Route>
);
/companywill be redirected to /about

Redirect routes with params
const routes = (
<Redirect from="/user/me" to="user" params={{userId: MY_ID}} />
</Route>
);
Notice the order of the routes

Without nesting
const routes = [
<Route name="about" handler={About} />,
<Route name="contact" handler={Contact} />
];
Array of routes

Include external routes
import aboutRoutes from 'about/routes';
const routes = {
<Redirect from="/user/me" to="user" params={{userId: MY_ID}} />
{aboutRoutes}
</Route>
};

Using hashes
import React from 'react';
import Router from 'react-router';
Router.run(routes, (Handler) => {
React.render(<Handler/>, document.body);
});
Location will be http://localhost/#/aboutetc.

Using HTML5 History
Router.run(routes, Router.HistoryLocation, (Handler) => {
});
Location will be http://localhost/aboutetc.

Using Universal Rendering
app.serve((req, res) => {
Router.run(routes, req.path, function (Handler) {
const html = React.renderToString(Handler);
res.send(html);
});
});
Render html to the client

App component
import { RouterHandler } from 'react-router';
class App extends React.Component {
render() {
return (
<div>
<h1>Hello World!</h1>
<RouterHandler />
</div>
);
}
}
Use RouterHandlerto render matched route

ES5
var User = React.createClass({
contextTypes: {
router: React.PropTypes.func
},
render: function () {
return <h1>Hello World</h1>;
}
}
Available in render self.context.router

ES6
class User extends React.Component {
render() {
}
}
User.contextTypes = {
router: React.PropTypes.func
};

ES7
static contextTypes = {
router: React.PropTypes.func,
}
render() {
}
}

Getting params
}
render() {
const user = this.context.router.getCurrentParams().userId;
return <h1>Hello user {user}</h1>;
}
}
From route /user/:userId

Getting query params
}
render() {
const message = this.context.router.getCurrentQuery().message;
return <h1>{message}</h1>;
}
}
From url /user/1234?message=Hello%20World

Getting current routes
}
render() {
const routes = this.context.router.getCurrentRoutes();
...
}
}
Array of routes in nesting order

Fetching data
Router.run(routes, (Handler, state) => {
fetchData(state).then(() => {
});
});

Fetching data
function fetchData(state) {
return Promise.all(state.routes.filter((route) => {
return route.handler.fetchData;
}).map((route) => {
return route.handler.fetchData(state.params, state.query);
});
}

Fetching data
static fetchData(params) {
return new Promise((resolve) => {
MyApi.loadSomething(() => {
resolve();
});
});
}
...
}

isActive method
class Tab extends React.Component {
}
render() {
const isActive = this.isActive(this.props.to);
const className = isActive ? 'active' : '';
return <li className={className}><Link {...this.props} />;
}
}
Call with <Tab to="about">About</Tab>

Using href
render() {
return (
<a href="/about">About</a>
);
}
}
Don't use this!

Using Link Component
import { Link } from 'react-router';
render() {
return (
<Link to="about">About</Link>
);
}
}
Will generate <a href="/about">About</a>

class About extends React.Component {
render() {
return (
<Link to="user" params={{userId: 1234}}>User 1234</Link>
);
}
}
With params

render() {
return (
<Link to="contact" query={{message: 'Hi'}}>Say hi</Link>
);
}
}
Will generate /contact?message=Hi

Using makeHref
}
render() {
const link = this.context.router.makeHref('about');
return (
<a href={link}>About</a>
);
}
}

Using makeHref
}
render() {
const link = this.context.router.makeHref('user',
{ userId: 1234 },
{ message: 'Hi'});
return (
<a href={link}>About</a>
);
}
}
With params and query params

Using transitionTo
}
onSubmit() {
this.context.router.transitionTo('about');
}
...
}
Will transition to /about

Using transitionTo
}
onSubmit() {
this.context.router.transitionTo('user',
{userId: 1234});
}
...
}
Will transition to /user/1234

Using transitionTo
}
onSubmit() {
this.context.router.transitionTo('contact',
{},
{message: 'Hi'});
}
...
}
Will transition to /contact?message=Hi

Using replaceWith
}
onSubmit() {
this.context.router.replaceWith('about');
}
...
}
Not added to browser history

Using goBack
}
onClick() {
this.context.router.goBack();
}
...
}
Go back one step in history

goForward
}
onClick() {
this.context.router.goForward();
}
...
}
Go forward one step in history

go(n)
}
onClick() {
this.context.router.go(2);
}
...
}
Go forward two steps in history

go(-n)
}
onClick() {
this.context.router.go(-2);
}
...
}
Go backward two steps in history

willTransitionTo
static willTransitionTo(transition) {
if (!auth.loggedIn()) {
transition.redirect('/login',
{},
{'redirect' : transition.path});
}
}
...
}

willTransitionFrom
static willTransitionFrom(transition) {
if (!form.validate()) {
transition.abort();
}
}
...
}

Handler to component
const routes = (
</Route>
);
...
const routes = (
<Route component={App} path="/">
<Route path="about" component={About} />
</Route>
);

RouterHandler to props
render() {
return (
<RouterHandler />
);
}
}
render() {
return (
{this.props.children}
);
}
}

No more named routes
</Route>
...
<Route path="/user/:userId" component={User} />
</Route>

Not found route
<NotFoundRoute handler={NotFound} />
...
<Route path="*" component={NotFound} />
Catch all

Redirect routes
<Redirect from="/user/me" to="user" params={userId: '1234'} />
</Route>
...
<Redirect from="/user/me" to="/user/1234" />
<Route path="/user/:userId" component={User} />
</Route>
Params in the url

Default route
<DefaultRoute handler={Home} />
</Route>
...
<IndexRoute component={Home} />
<Route path="about" component={About} />
</Route>
Home is available at /

Multiple components
const routes = (
<Route component={App}>
<Route path="users" components={{main: Users,
sidebar: UsersSidebar}}/>
</Route>
);

Multiple components
render() {
return (
<div>
<div className="Main">
{this.props.main}
</div>
<div className="Sidebar">
{this.props.sidebar}
</div>
</div>
);
}
}

Running the router
Router.run(routes, (Handler) => {
});
...
import { history } from 'react-router/lib/HashHistory';
React.render((
<Router history={history}>
{routes}
</Router>
), document.body);

History options
import { history } from 'react-router/lib/HashHistory';
import { history } from 'react-router/lib/BrowserHistory';
import { history } from 'react-router/lib/MemoryHistory';

Using makeHref
const link = this.context.router.makeHref('user',
{ userId: 1234 },
{ message: 'Hi'});
...
const link = this.context.router.createHref('/user/1234',
{ message: 'Hi'});
Params in the link

Link component
<Link to="user" params={{userId: MY_ID}}>John Do</Link>
...
<Link to={'/users/' + MY_ID}>John Do</Link>
Params in the link

transitionTo
this.context.router.transitionTo(pathname, params, query)
this.context.router.transitionTo('user',
{ userId: 1234 },
{ message: 'Hi' });
...
this.context.router.transitionTo(pathname, query, state)
this.context.router.transitionTo('/user/1234',
{ message: 'Hi' });

willTransitionTo to onEnter
static willTransitionTo(transition) {
...
}
}
___
function requireAuth(nextState, transition) {
...
}
const routes = (
<Route path="about" component={About} onEnter={requireAuth} />
</Route>
);

willTransitionFrom to onLeave
...
}
}
___
function handler(nextState, transition) {
...
}
const routes = (
<Route path="about" component={About} onLeave={handler} />
</Route>
);

routerWillLeave
...
}
...
}
static routerWillLeave(nextState, router) {
...
}
...
}

State
}
render() {
const user = this.context.router.getCurrentParams().userId;
}
___
static contextTypes: {
location: React.Proptypes.object
}
render() {
const user = this.context.params.userId;
}

State on routing component
render() {
const location = this.props.location;
const params = this.props.params;
const history = this.props.history;
...
}
}

State
0.x 1.x
getPath() location.pathname +
location.query
getPathname() location.pathname
getParams() params
getQuery() location.query
getRoutes() routes
isActive(to, params,
query)
history.isActive(pathname,
query)

Questions?
slideshare.net/robgietema

React Router: React Meetup XXL

Related slideshows

More Related Content

React Router: React Meetup XXL