Thursday, 15 June, 2017 UTC
Summary
React Router has gone through some changes over the years. Here’s an intro to the latest version: React Router 4.
Installing React Router Same as installing any package. You’ll probably want
react-router-dom and not react-router, though:$ yarn add react-router-dom # or with npm: $ npm install react-router-dom --saveIt’s actually pretty intuitive. Just define Routes in the child element of a Router:
import React, { Component } from 'react'; // This example's for browser use, so I'm using `BrowserRouter`. // The are other routers for other environments, though. import { BrowserRouter, Route } from 'react-router-dom'; // Your components. import AboutPage from './AboutPage'; import HomePage from './HomePage'; class App extends Component { render() { return ( <BrowserRouter> <div> {/* `component` will render when `path` matches the user's location */} {/* `exact` makes it so it only renders if `path` matches exactly. */} {/* Otherwise, `HomePage` would render on "mysite.com/About" as well as "mysite.com/". */} <Route exact path="/" component={HomePage}/> <Route path="/About" component={AboutPage}/> </div> </BrowserRouter> ); } } export default App; Of course, routes aren’t that useful if the user has to manually edit the URL. React Router offers a solution in the form of the
Link component:import React from 'react'; import { Link } from 'react-router-dom'; // Our Home Page. Exciting stuff. export default function HomePage() { return ( <div> <h1>{'Home Page'}</h1> {/* A link to the About route. */} <Link to="/About">{'Check out our About Page!'}</Link> </div> ); } If you're wondering why you shouldn't just use an anchor tag (
<a>): React Router does some cool stuff with the history object.