React Router
React Router is a popular community-built library that provides a set of navigational components to help create routing within React applications. In this lesson, we'll use React Router to declare the main routes and the components that should be shown in these routes for our TinyHouse client application.
📝 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 fromreact-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>
This page is a preview of TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two