Build Web App Navigation With React Router and BrowserRouter
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 lesson preview is part of the TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two with a single-time purchase.
[00:00 - 00:17] While there are many routing libraries for React, 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.
[00:18 - 00:30] We'll install React Router into our application. We'll head to the terminal and install the React Router DOM library, which is the React Router package.
[00:31 - 00:54] We'll also install the type definitions of the React Router DOM library as an application dependency. In our main index.tsx file that renders our React application, we'll begin constructing the initial routes we'll want defined.
[00:55 - 01:05] We'll assume component files have already been set up in the sections folder of our app. And we'll look to import the components we want to render for separate routes.
[01:06 - 01:21] Home, Host, Listing, Listings, Not Found, and User. React Router provides a few separate components to help conduct client-side routing.
[01:22 - 01:35] At the core of every React Router application is the main Router component. We'll import the browser Router component as this main component and label it as Router.
[01:36 - 01:51] Browser Router should be used for client-side routed applications. For route matching, React Router provides two other components, the switch component and the route component.
[01:52 - 02:07] In this index file, we'll construct a function component labeled app that will be responsible in rendering the correct route component. In the app component return statement, we'll return the parent router.
[02:08 - 02:23] Within, 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 routes component that takes a few props.
[02:24 - 02:53] The path prop is used to determine the path name a certain component should be rendered, and the component prop is used to determine which components should be shown for this particular path name. We'll set up our application routes as follows.
[02:54 - 03:00] The index route is to render the home component. The host route is to render the host component.
[03:01 - 03:06] The listing route is to render the listing component. Notice the colon ID syntax?
[03:07 - 03:20] Here's where we're stating a URL parameter that is to be set dynamically for our listing routes. The listings route is to render the listings component with a dynamic location parameter.
[03:21 - 03:35] The question mark states that the location parameter is optional and the listings route without the parameter would still render the listings components . The user route with a dynamic ID parameter will render the user components.
[03:36 - 04:07] And finally, if a route is specified that we haven't defined, React Router will default to the route here that doesn't have a path as a fallback, with which we'll state should render the not found component. Though the paths we've specified don't match one another, we'll still use the exact prop for each route to ensure that the components should only be rendered when the exact path name specified is defined.
[04:08 - 04:22] We'll now render the app functional component we've created within our React DOM render function. At this moment, we haven't created any of the components that is to be rendered in our app based on the different routes.
[04:23 - 04:44] As a result, we'll set up different folders in our sections folder to represent the different components we want to create. Home, Host, Listing, Listings, Not Found, and User.
[04:45 - 05:02] In each of these folders, we'll create a single index.tsx file responsible in creating and returning the component function. In each of these functions, we'll just state that the component is going to render the name of the route displayed to the user.
[05:03 - 06:10] So the home component will just say Home, the host component will say Host, the listing component will say Listing, we'll remove all the work we've done in part one for our listings folder, and have a listings component simply be created in the index file that returns a header that says Listings, Not Found would say Not Found, and User would say User. In the sections index.ts file, we'll now re-export all the created components so the components can be imported directly from the sections folder.
[06:11 - 06:41] When we save our file, we should now see the routes we've specified work is intended, and we'll refresh the UI, the error still remains, we'll head to the terminal, exit our client webpack server and restart it, and heading back to the browser, we'll now be displayed with the home component in the index route. When we now navigate to each individual route, we'll see the individual component that should show for the route.
[06:42 - 07:14] When we go to the host route, we'll see the host component, when we go to the listing route and apply an ID parameter, we'll see the listing component, when we go to the listings route with a value for the location parameter, we'll have the listings component be displayed, when we head to the user route with an ID parameter, we'll see the user route. If we enter a random route that we haven't defined, our now are not found components would show.
[07:15 - 07:22] Amazing, we're officially using React Router to display different components in different client side routes.