Routing with React Router 5

Reed Barger
A free video tutorial from Reed Barger
Professional Web and Mobile Developer
4.5 instructor rating • 20 courses • 40,295 students

Learn more from the full course

Awesome Apps with React Hooks and Firebase

Learn cutting-edge React along with the most popular serverless framework by building a Hacker News Clone

02:38:08 of on-demand video • Updated May 2019

  • Build amazing realtime, serverless apps with React Hooks & Firebase + Firestore
  • Learn how to use cutting edge React features with the most popular serverless platform
  • Create and ship high-quality web apps
English [Auto] Since we're already given all the components that we'll have within our app we can go ahead and start building roots for them. All of our routes are gonna be within the app component and we'll get started on that by first importing our router. It'll be the browser router from the package react rather dumb. And in addition to needing the router we'll also need the switch component to make sure all of our routes are put within a single child component as well as the route component declaring trout will remove the starting markup that was returned from app or replace that with a set of browser router tags within it will be our switch component and the first drought that we'll have will be of the path slash create so be our create route and the component that we want to display for it will be the create link component. Now see within my suggestions that I'm being told from the code that I can automatically import this create link component that I've already referenced and to do that whenever you get that suggestion. If you're using the U.S. Code you can just hit tab. So I'm gonna be using this a lot and building out our app. So the next round after. Create for creating every link we're gonna have the log in path for authenticating users so be connected to the log in component. The next route will be slash forgot. This will be for forgotten passwords if a user forgets their password it'll be connected to the forgot password component. Next we'll have a search path. This will be used for searching links. We'll be connected to the search links component. And next we'll have slashed top. This will be for all of the top voted links here will render the link list component. And after this we'll have the path beginning with Slash new and then we'll add another slash and we want this to be a dynamic route so we'll add a colon and the name of this dynamic value will be page so this will be four pages nation. We're gonna have pages of new links and the component here will also be linked list. And finally we're gonna have a route for each individual link. So for example it's where we can add comments to the link and that path is gonna begin with Slash link Slash. And then the dynamic value which we'll call link I.D. and the component we'll have here will be link detail. Now you might be asking about the route route. What about the home page. We don't have a path for that it seems. Well we're gonna create one for it. We'll make a route and the path will be set to just forward slash and we'll add the exact keyword to it to make sure that we don't match multiple routes when users go to the home page but as compared to adding a component we're going to add the render prop so that when a user goes to the root route we're going to execute a function and at the end use the redirect component from reactor after Dom so we'll bring that in as well. We want to redirect to and we specify this with the two prop to forward slash new slash one. So we want to go to the very first page of our new route. So now we should be able to test out our routing let's save app chars and flip back and we should see immediately when our project hot reloads that instead of being on the route route as before we're taken to slash new slash one. So we see that that redirect is working and that we declared and if we go to any other route for example create we see the create link component that it's connected to log in the log in component etc..