Setting Up React Router

[00:00 - 00:09] Now that we can focus on building out the front and other app, we need to think about what the UI is actually going to look like. Let's take a look at the final version of the app we're going to be building.

[00:10 - 00:20] So first, we have the profile page, the home page. Then we have the top artists page, which has a path of top-artists.

[00:21 - 00:30] We have the top-tracks page at top-tracks. We have the playlists page at slash playlists.

[00:31 - 00:47] Then we have the playlists details page at slash playlist slash playlist ID. Since we're working with a React app, we'll use React Router, a popular routing library for React to set up routes for these pages.

[00:48 - 01:05] We'll be using the web version of React Router, so let's go ahead and npm install it. We'll cd into the client directory, our React app and run npm install, the React Router DOM.

[01:06 - 01:28] Then we'll cd back out to our route and run npm start. In our app.js file, we will follow the Quick Start example and the React Router docs, and add the following imports.

[01:29 - 01:49] If we follow React Router's Quick Start example here, we'll replace our logged-in state with a router component that renders a bunch of routes within a switch. So we'll go down here into our return statement and get rid of this, and replace it with the following.

[01:50 - 02:04] So as you can see, each route or page is wrapped in a route component, and then we declare the path we want that route to use with a path prop. Something important to note here is the order of the routes.

[02:05 - 02:19] According to React Router's documentation, when a switch component is rendered, it searches through its children route elements to find whose path matches the current URL. When it finds one, it renders that route and ignores all others.

[02:20 - 02:33] This means that you should put routes with more specific, typically longer paths before less specific ones. So in our case, we need to declare the /playlist/id route before the /playlist route.

[02:34 - 02:51] If we don't, navigating to a URL like /playlist/abc123 will render the /playlists route since it's technically a match. The easiest way to test if we set up our router properly is to simply visit those routes in the browser.

[02:52 - 03:20] So if we head over to localhost 3000, we can test top artists, we'll test top tracks, we'll test /playlists, and we'll also test /playlists/ with a /id/ wrapram. Great. So the last thing we want to do while setting up routing is to ensure that when a route changes, the page is always scrolled to the top.

[03:21 - 03:38] It may not seem obvious now, but when we have a page that has a lot of content and we navigate to a new page using React Router, the default behavior is for the new page to stay scrolled down. We don't want to make our users manually scroll to the top, so luckily there's an easy solution that doesn't involve much extra code.

[03:39 - 04:10] As recommended in React Router's documentation, we can just add a scroll to top component that will scroll the window up on every navigation. In our app.js file, we'll add use location to our list of imports from React Router. Then we can just copy this scroll to top function, add it above our app function, and then add the scroll to top component above our switch component in the router.

[04:11 - 04:17] Awesome, that's all we need to do to get set up with routing.