React Router v5

Learning Goals:

• Understand and articulate the need for routing
• Be able to confidently implement React Router in a project
• Utilize URL params to build dynamic routes
• Understand how to test components with using React Router

Vocab

• BrowserRouter A <Router> that uses the HTML5 history API (pushState, replaceState and the popstate event) to keep your UI in sync with the URL
• Route Its most basic responsibility is to render some UI when a location matches the route’s path
• Link Links provide declarative, accessible navigation around your application
• NavLink A special version of the <Link> that will add styling attributes to the rendered element when it matches the current URL.
• Redirect Rendering a <Redirect> will navigate to a new location. The new location will override the current location in the history stack, like server-side redirects (HTTP 3xx) do.
• Switch Renders the first child <Route> or <Redirect> that matches the location. <Switch> is unique in that it renders a route exclusively (only one route wins).
• match A match object contains information about how a <Route path> matched the URL.

React Router

Review

Why Routing?

Routing refers to keeping a webpage up to date with the current url, and vice-versa.

Most of the apps you’ve written so far have been single-page applications. One HTML page whose content is updated through user interactions and JS. These DO NOT use routing.They work fine, but put some limits on the user experience of our applications.

Fortunately, routing with React is easy! We just need to use a library called React Router.

React Router allows us to conditionally render components based on the current url

The Code

Rather than tell you about how Router works, we’ll work through a series of exercises and examples.

We’ll be using this repo to solve a series of challenges listed below.

Installation Instructions

# Clone the repo 
cd react-router-v5
npm i
npm start

# open your text editor

The App is not fully put together. It has a series of components that will serve as building blocks of the final component. You won’t be building out new components, but you will be editting existing ones.

Setting up Router

Before we break out into groups, we’ll review how to set up Router as a class.

The <Home /> component is rendering a welcome message. Right now, nothing but a nav bar is being rendered by the App. Let’s use router to render the <Home /> component as a landing page.

Remember that React Router conditionally renders components based on the current url. So our goal is to render the component when the user is at the base url.

npm install react-router-dom

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App/App';
import { BrowserRouter } from 'react-router-dom';

const router = <BrowserRouter> <App /> </BrowserRouter>;

ReactDOM.render(router, document.getElementById('root'));

import React, { Component } from 'react';
import './App.css';
import puppies from '../data/puppy-data.js';
import sharks from '../data/shark-data.js';
import Creatures from '../Creatures/Creatures';
import Home from '../Home/Home';
import CreatureDetails from '../Creatures/CreatureDetails';
import { Route } from 'react-router-dom';


export default class App extends Component {
  render() {
    return (
      <main className="App">
        <nav>
          <a href="/puppies" className="nav">Puppies</a>
          <a href="/sharks" className="nav">Sharks</a>
        </nav>
        <h1>Puppies or Sharks?</h1>
        <Route exact path="/" render={ Home }/>
      </main>
    );
  }
}

Exercise # 1: Render Puppies

Your goal is click on the word Puppies and see a grid of 9 puppies on the DOM. The page should look something like the picture on the lesson plan. While you may change components as needed, you shouldn’t outright delete content from the page to achieve this.

/ App.js 

import './App.css';
import puppies from '../data/puppy-data.js';
import sharks from '../data/shark-data.js';
import Creatures from '../Creatures/Creatures';
import Home from '../Home/Home';
import { Route, NavLink } from 'react-router-dom';


export default class App extends Component {
  render() {
    return (
      <main className="App">
        <nav>
          <NavLink to="/puppies" className="nav">Puppies</NavLink>
          <NavLink to="/sharks" className="nav">Sharks</NavLink>
        </nav>
        <h1>Puppies or Sharks?</h1>
        <Route exact path="/" render={() => <Home />}/>
        <Route path="/puppies" render={() => <Creatures name="puppies" data={puppies} />} />
      </main>
    );
  }
}

Render exact matches

Check out what happens when you take the exact prop out of one of your Routes. Why do you think everything is rendering at /puppies?

The exact prop can be used to make sure that partial matches of a URL don't trigger a render.

Render Methods

According to the docs, Routes have three possible methods for rendering a component on match:

• component
• render
• children

We recommend to use render or children – they work more efficiently when re-rendering components. We’ll take a look at some more benefits they provide after the next exercise.

Here’s an example of their syntax: Component

<Route path='/unicorns' component={ Unicorns } />

Render

<Route path='/unicorns' render={ () => <Unicorns /> }

This also allows you to define and pass specific properties to a component dynamically. For example:

<Route path='/ideas/:id' render={({ match }) => {
  const idea = ideas.find(idea => idea.id === parseInt(match.params.id));

  if (!idea) {
    return (<div>This idea does not exist! </div>);  
  }
  return <ListItem match={match} {...idea} />

}} />

Children

<Route path='/other-unicorns' children={ () => <Unicorns /> } />

Exercise # 2: Rendering Sharks

Get the sharks link working as well!

// App.js
import './App.css';
import puppies from '../data/puppy-data.js';
import sharks from '../data/shark-data.js';
import Creatures from '../Creatures/Creatures';
import Home from '../Home/Home';
import { Route, NavLink } from 'react-router-dom';

export default class App extends Component {
  render() {
    return (
      <main className="App">
        <nav>
          <NavLink to="/puppies" className="nav">Puppies</NavLink>
          <NavLink to="/sharks" className="nav">Sharks</NavLink>
        </nav>
        <h1>Puppies or Sharks?</h1>
        <Route exact path="/" render={ Home }/>
        <Route path="/puppies" render={() => <Creatures name="puppies" data={puppies} />} />
        <Route path="/sharks" render={() => <Creatures name="sharks" data={sharks} />} />
      </main>
    );
  }
}

Route Props

Let’s take a close look at what happens when you a Route renders.

Route render methods all provide access to route props, either automatically to the component they render, or via the callback function that the methods take.

These props include:

• history
• location
• match

<Route path='/unicorns' render={ ({ history, location, match }) => <Unicorns /> }

history and location are worth looking into on your own, but today we’ll focus on match.

The match gives us information about how and why the application matched. And it allows us to do some pretty cool stuff.

match.params

The params property of the match prop gives us an object with key value pairs of dynamic url parameters, and any strings that match them.

For instance, but changing our Puppies Route to this:

<Route
          path="/:animal"
          render={({match}) => <Creatures {...match} name="puppies" data={puppies} />}
        />

and then navigating to /puppies, we can see that the <Creatures /> component is recieving a params props with a value of {animal: puppies}

params allows us to define shapes of a url that will cause a match, then access the data from that url in our components.

This is great for dynamically rendering content based on things in the url, like an id. Let’s do that

Exercise #3: Dynamic Routing

Take a look at the CreatureDetails Component. It takes in all data for a given creature, and displays it on the page.

Your Task is to make a route that will dynamically render a CreateDetails component for a puppy based on its ID

// App.js
        <Route
          path="/puppies/:id"
          exact
          render={({match}) => {
            const { id } = match.params;
            const creatureToRender = puppies.find(creature => creature.id === parseInt(id));   
            return <CreatureDetails {...creatureToRender} />
          }}
        />

Exercise #4: Unit Testing the App

Uncomment the code blocks inside of the Unit Test portion of App.test.js

// App.test.js
import React from "react";
import App from "./App";
import { render, fireEvent } from "@testing-library/react";
import "@testing-library/jest-dom";
import { BrowserRouter } from "react-router-dom";

describe("App", () => {
  describe("Unit Tests", () => {
    it("Should render the heading", () => {
      const { getByRole } = render(
        <BrowserRouter>
          <App />
        </BrowserRouter>
      );
      const heading = getByRole("heading", { name: "Puppies or Sharks" });

      expect(heading).toBeInTheDocument();
    });

    it("Should render a nav", () => {
      const { getByRole } = render(
        <BrowserRouter>
          <App />
        </BrowserRouter>
      );
      const navigation = getByRole("navigation");

      expect(navigation).toBeInTheDocument();
    });
  });
});

Exercise #5: Integration Testing the App

Uncomment the code in the Integration Test portion of App.test.js

import { createMemoryHistory } from 'history';
import { BrowserRouter } from 'react-router-dom';

// Make a new blank history object
const customHistory = createMemoryHistory();

// Overwrite the history of the BrowserRouter:
const routerWithCustomHistory = <BrowserRouter history={customHistory}></BrowserRouter>

import React from 'react';
import App from './App';
import { render, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import { BrowserRouter } from 'react-router-dom';
import { createMemoryHistory } from 'history';

describe('App', () => {
  describe('Integration Tests', () => {
    it('Should render 9 puppies on click', () => {
      const history = createMemoryHistory();
      const { getByRole, getAllByRole } = render(
        <BrowserRouter history={history}>
          <App />
        </BrowserRouter>
      );
      const puppiesLink = getByRole('link', { name: 'Puppies'});
      const welcomeMessage = getByRole('heading', {name: 'Welcome! Click on the links above to see a variety of creatures'});

      expect(welcomeMessage).toBeInTheDocument();

      fireEvent.click(puppiesLink);

      expect(welcomeMessage).not.toBeInTheDocument();

      const images = getAllByRole('img');

      expect(images).toHaveLength(9);

    });

    it('Should render 9 sharks on click', () => {
      const history = createMemoryHistory();
      const { getByRole, getAllByRole } = render(
        <BrowserRouter history={history}>
          <App />
        </BrowserRouter>
      );
      const sharksLink = getByRole('link', { name: 'Sharks'});
      const welcomeMessage = getByRole('heading', {name: 'Welcome! Click on the links above to see a variety of creatures'});

      expect(welcomeMessage).toBeInTheDocument();

      fireEvent.click(sharksLink);

      expect(welcomeMessage).not.toBeInTheDocument();

      const images = getAllByRole('img');

      expect(images).toHaveLength(9);

    });

  });
});

import React from 'react';
import App from './App';
import { render, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import { BrowserRouter, MemoryRouter } from 'react-router-dom';

describe('App', () => {
  describe('Integration Tests', () => {
    it('Should render 9 puppies on click', () => {
      const { getByRole, getAllByRole } = render(<MemoryRouter><App /></MemoryRouter>);
      const puppiesLink = getByRole('link', { name: 'Puppies'});
      const welcomeMessage = getByRole('heading', {name: 'Welcome! Click on the links above to see a variety of creatures'});

      expect(welcomeMessage).toBeInTheDocument();

      fireEvent.click(puppiesLink);

      expect(welcomeMessage).not.toBeInTheDocument();

      const images = getAllByRole('img');

      expect(images).toHaveLength(9);

    });

    it('Should render 9 sharks on click', () => {
      const { getByRole, getAllByRole } = render(<MemoryRouter><App /></MemoryRouter>);
      const sharksLink = getByRole('link', { name: 'Sharks'});
      const welcomeMessage = getByRole('heading', {name: 'Welcome! Click on the links above to see a variety of creatures'});

      expect(welcomeMessage).toBeInTheDocument();

      fireEvent.click(sharksLink);

      expect(welcomeMessage).not.toBeInTheDocument();

      const images = getAllByRole('img');

      expect(images).toHaveLength(9);

    });

  });
});

Extra Resources:

Tutorials / Guides:

• React Training’s 13 minute overview of React Router
• The Hitchhiker’s Guide to React Router - learn Router in 20 minutes
• The Hitchhiker’s Guide to React Router - match, location, history

Helpful Articles / Docs:

• Routing and Form Submission
• Old lesson plan
• React Router Testing Recipe from RTL
• Memory Router docs
• history package docs

<Link to='/unicorns' />

<Link to='/unicorns'> Unicorns </Link>

<NavLink to='/about'>About</NavLink>

<Redirect to='/not/unicorns' />

<Switch>
  <Route exact path='/' component={Home} />
  <Route path='/users/add' component={UserAddPage} />
  <Route path='/users' component={UsersPage} />
  <Redirect to='/' />
</Switch>