We' e made it th ough 16 da s al ead ! Pat ou self on the back... but not fo too long... the e is still a lot mo e.
Right no , ou app is limited to a single page. It's p ett a e to find an comple application that sho s a single ie . Fo instance, an application might ha e a login ie he e a use can log in o a sea ch esults page that sho s a use a list of thei sea ch esults. These a e t o diffe ent ie s ith t o diffe ent page st uctu es.
Let's see ho e can change that ith ou app toda .
We'll use the e popula eact- oute https://github.com/ eactjs/ eact- oute lib a fo handling diffe ent links. In o de to use the react-router
lib a , e'll need to install it using the npm package manage :
With react-router installed, e'll impo t a fe packages f om the lib a and
update ou app a chitectu e. Befo e e make those updates, let's take a step back and f om a high le el look at ho and hy e a chitect ou application this a .
Conceptuall ith React, e' e seen ho e can c eate t ee st uctu es using components and nested components. Using this pe specti e ith a single page app ith outes, e can think of the diffe ent pa ts of a page as
child en. Routing in a single page app f om this pe specti e is the idea that e can take a pa t of a subt ee and s itch it out ith anothe subt ee. We can then dynamically s itch out the diffe ent t ees in the b o se .
In other o ds, e'll define a React component that acts as a root component of the outable elements. We can then tell React to change a ie , hich can just s ap out an enti e React component fo anothe one as though it's a completel diffe ent page ende ed b a se e .
We'll take ou App component and define all of the diffe ent outes e can
make in ou app in this App component. We'll need to pull some components
This is the component e'll use to define the root o the outing t ee. The
<BrowserRouter /> component is the component he e React ill eplace
it's child en on a pe - oute basis.
We'll use the <Route /> component to c eate a oute a ailable at a specific
location a ailable at a u l. The <Route /> component is mounted at page
URLs that match a pa ticula oute set up in the oute's configu ation props.
One olde , compatible a of handling client-side na igation is to use the #
hash ma k denoting the application endpoint. We'll use this method. We'll need this object impo ted to tell the b o se this is ho e ant to handle ou na igation.
F om the app e c eated a fe da s ago's oot di ecto , let's update ou
src/App.js to impo t these modules. We'll impo t the BrowserRouter using a
diffe ent name s nta ia ES6:
import React from 'react';
import {
BrowserRouter as Router, Route
} from 'react-router-dom'
export class App extends React.Component { render() {
<Router>
{/* routes will go here */} </Router>
} }
No let's define the outing oot in the DOM using the <Router />
component e impo ted in the render() function. We'll define the t pe of
outing e a e using using the history p op. In this e ample, e'll use the
<Route />
uni e sall -compatible hash histo t pe:
export class App extends React.Component { // ...
render() { <Router>
{/* routes will go here */} </Router>
} // ... }
No let's define ou fi st oute. To define a oute, e'll use the <Route />
component e po t f om react-router and pass it a fe p ops: path - The path fo the oute to be acti e
component - The component that defines the ie of the oute
Let's define the a oute at the oot path / ith a stateless component that
just displa s some static content:
const Home = () => (<div><h1>Welcome home</h1></div>) // ...
class App extends React.Component { render() {
return ( <Router>
<Route path="/" component={Home} /> </Router>
) } }
Loading this page in the b o se , e can see e get ou single oute at the oot u l. Not e e citing. Let's add a second oute that sho s an about page at the /about URL.
const Home = () => (<div><h1>Welcome home</h1></div>) // ...
class App extends React.Component { render() {
return ( <Router> <div>
<Route path="/" component={Home} />
<Route path="/about" component={About} /> </div> </Router> ) } }
Welcome home
In ou ie e'll need to add a link o an ancho tag -- <a /> to enable ou
use s to t a el f eel bet een the t o diffe ent outes. Ho e e , using the
<a /> tag ill tell the b o se to t eat the oute like it's a se e -side oute.
The <Link /> component e ui es a p op called to to point to the client-
side oute he e e ant to ende . Let's update ou Home and About
components to use the Link:
const Home = () => (<div><h1>Welcome home</h1><Link to='/about'>Go to about</Link></div>)
const About = () => (<div><h1>About</h1><Link to='/'>Go home</Link> </div>)