📝 This module's quiz can be found - here.
🗒️ Solutions for this module's quiz can be found - here.

Note: In Module 15 (i.e. the Bonus Module), we've added a spin-off lesson titled React Router Hooks that describes how React Router now provides a few Hooks we can use! Through the course, feel free to use that lesson as a reference to recognize how certain things we may do later on (e.g. access URL parameters of a route) can be done with certain Hooks.

While many different routing libraries exist for React applications, the community's clear favorite is React Router. React Router gives us a wonderful foundation for building rich applications that have numerous components across many different views and URLs.

We'll install React Router into our application. In the terminal of our client project, we'll install the react-router-dom library which is the React Router npm package. We'll also install additional type definitions for the react-router-dom library.

npm install react-router-dom @types/react-router-dom

TinyHouse Routes#

In the main src/index.tsx file where we render our React application, we'll begin constructing the initial routes we'll want to be defined. We'll assume component files have already been set up in the sections folder, and we'll look to import the components we want to render for separate routes. These would be the <Home />, <Host />, <Listing />, <Listings />, <NotFound />, and <User /> components.

import { Home, Host, Listing, Listings, NotFound, User } from "./sections";

React Router provides a few separate components to help conduct client-side routing. At the core of every React Router application is the main router components - BrowserRouter & HashRouter. We'll use BrowserRouter which is preferred for client-side routed applications since URL paths with BrowserRouter won't have a hash (#) symbol. We'll import BrowserRouter and label it as Router.

The HashRouter component sets URLs in hash mode. Hash mode URLs always contain a hash symbol (#) after the hostname. Hash mode means application routes will be displayed something like this - https://tinyhouse.app/#/host. The benefit to this often lies with allowing us to have multiple client-side routes without having to provide the necessary server-side fallbacks. This is because everything after the hash is never sent to the server.

Our TinyHouse application is a single-page application which means the server will return the same index page regardless of which route the user is in. Because of this, hash mode URLs will be unnecessary which is why we conform to using the BrowserRouter component from react-router-dom.

For route matching, React Router also provides two other components - Switch and Route. We'll import the Switch and Route components as well.

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

In the src/index.tsx file, we'll construct a function component labeled App that will hold the responsibility in rendering a certain component based on the route the user is in. In the App component return statement, we'll return the <Router /> component as the parent.

const App = () => {

  return <Router>{/* ... */}</Router>;

};

Within <Router />, we'll place the React Router <Switch/> component that will help control which routed component should be shown.

Route matching is done with the help of the React Router <Route/> component that takes a few props.

• The path prop is used to determine the pathname in which a certain component should be rendered.

• The component prop is used to determine which component should be shown for a particular pathname.

We'll set up our application routes as follows:

const App = () => {

  return (

    <Router>

      <Switch>

        <Route exact path="/" component={Home} />

        <Route exact path="/host" component={Host} />

        <Route exact path="/listing/:id" component={Listing} />

        <Route exact path="/listings/:location?" component={Listings} />

        <Route exact path="/user/:id" component={User} />

        <Route component={NotFound} />

      </Switch>

    </Router>