‫Okay, so now that we know what routing
‫and routes are,
‫let's use the React Router library for the very first time.
‫So in order to implement some routes
‫for the main pages in our application.
‫So with routing,
‫we now want to associate basically specific parts
‫of the URL to specific components in our application.
‫So if we had, for example,
‫this root URL and then /product,
‫then we would want to display a product component here.
‫So right now with this, of course, nothing happens.
‫So our app still looks exactly the same
‫but now let's change that.
‫So we will define a route
‫for this URL and for a couple other ones as well.
‫So to start, let's actually create the pages,
‫so the components for the pages.
‫And for that I will create a new folder inside our sources
‫and I will call this one pages.
‫So pages is for these structural components
‫that we will then match to these URLs.
‫And let's start with the product page.
‫So Product.jsx.
‫And then let's again use that snippet to be a bit faster.
‫And then here I will really
‫just write something very simple.
‫So we will get all the content and the styling
‫for each of our pages a bit later, but for now,
‫I'm really only concerned about making our routes work
‫so that you can learn how to use React Router
‫in a very simple way.
‫So let's close this one here
‫and let's create just a few more pages.
‫So let's do the homepage
‫and let's actually use now WorldWise here,
‫so the name of the app.
‫And then let's also create a pricing page.
‫Okay, and so with this, we have three pages
‫and so we can create three routes for them.
‫And so that's what we'll do next.
‫So let's open up again a new terminal here
‫so that we don't have to finish the current process.
‫And then let's install our React Router package.
‫So npm install react-router, and then very important,
‫it needs to be the one for the DOM.
‫Now, if we just install this,
‫then it would, of course, install the latest version,
‫which in the future when you build your own apps,
‫that's what you're going to do.
‫But for now in this project,
‫we will want to make sure that we're using version six
‫so that your code will work exactly the same way as mine.
‫So let's install that.
‫And that was pretty fast.
‫Okay, now since React version 6.4,
‫there are two big ways of defining routes in our code.
‫And we are going to use the more traditional approach,
‫which is basically to define our routes
‫in a declarative way.
‫So what this means is that basically, we will use a couple
‫of special components that React Router gives us
‫to define our routes right in the JSX.
‫So that sounds confusing.
‫And so let's just do it.
‫So we start by using the BrowserRouter.
‫So BrowserRouter.
‫And then again, VS Code suggests us this import.
‫And so if we hit then enter,
‫you see that BrowserRouter has been brought in here
‫from react-router-dom
‫So make sure you have that line of code right there.
‫And then let's keep going.
‫So now in there, we need the routes component, and again,
‫make sure that it has been correctly imported here.
‫And now finally, we do the actual route definition.
‫So we need all of these other components here
‫but then now we can finally use the route component.
‫And so this is where we define basically the URL,
‫which is called the path prop.
‫And then for each path, of course,
‫we will be able to define one component.
‫And here let's start with product.
‫So the one that we already have here right now.
‫And then here we need to define a React element.
‫So not just the name of a component,
‫but really a React element,
‫which we get by using the component.
‫So here we want to use the product component,
‫so that page that we created right here.
‫And so then we need to bring that in here.
‫So import Product from, and then we need to step
‫into the pages folder and get Product from there.
‫All right, then we need to close
‫this route component right here.
‫And now I saved it.
‫And then we got this error here,
‫which is just because I didn't bring
‫in the route component here, but now as I save,
‫watch how it actually already automatically went
‫to the product component.
‫So great, but let's keep going here.
‫And then we will analyze this further
‫and really try to understand what is happening there.
‫So now let's also do the pricing path.
‫And here now we need then the pricing component
‫or actually the element.
‫And we use an element here because this way,
‫we will be able to pass props into this element.
‫So it could also be component, which it used to be
‫before version five or before version six actually.
‫So then we would just do this.
‫So basically just passing in the entire component
‫but then it would be very hard to pass in some props.
‫And so with this, that's a lot easier.
‫So just duplicating that line here.
‫And actually, let's do it again
‫for the homepage that we need next.
‫Here we need to just close that.
‫And then let's do the homepage here at the very top.
‫So here the path is just the route path basically.
‫And then the element that we want
‫is, of course, our Homepage.
‫And of course, it could be any other name
‫but that's just a page name that I like.
‫Okay, and now let's try this out.
‫So we already saw that now we have
‫our Product component right here.
‫And so let's check that out in our component tree.
‫And so now we get all these components that we have here
‫right inside our component tree, plus a few other ones.
‫But mainly we have our BrowserRouter, the router,
‫then the routes that we wrote into our code
‫and finally, the product component.
‫So what React Router did was to take a look at the URL here.
‫And so then it saw that we had Product here.
‫And so then it saw all these different routes
‫that we defined here
‫and it then selected the one that matches that part
‫of the URL.
‫And so that's product.
‫And so then this element here will be displayed here
‫in the UI.
‫And these other two are basically disregarded.
‫Let's try another one here.
‫So Pricing and that, of course,
‫will show us our pricing component.
‫And finally, if we remove everything
‫and go back to the route URL, then we get WorldWise.
‫Beautiful. So with this, we have our first routes defined.
‫Now, let me just show you something here.
‫So let's say we had some div around all of this
‫and then here we had some h1 element with something.
‫And so then well, that's a bit too big.
‫So then this part here,
‫this h1 would always stay in the page.
‫So this one is always here
‫but then the router chooses between one of these path.
‫So one of these three routes
‫and then here below that will display this part.
‫So now if we had, for example, here Pricing,
‫then you see the Hello Router part stays the same
‫but then it's as if this part here
‫was replaced by the pricing.
‫So if you had a part
‫of the page that you really want to always stay the same,
‫then this is how you would do it.
‫But usually what we do is to just have our app component
‫basically deciding which page should be displayed
‫in the UI.
‫So that's all this component here is going to do.
‫It will not really have its own output.
‫All it will do is, yeah, as I just said, displaying here one
‫of the pages, which is the one that matches the route.
‫Let's just decrease this here a little bit.
‫And now to finish, let me just show you another thing.
‫So let's create here another page called PageNotFound.jsx.
‫And then let's say not found here for now.
‫And so what we can do now is at the end,
‫create a route with the path set to the star.
‫And so this will basically catch all the routes
‫that were not matched to one of these other three.
‫And so this is how we basically implement a page not found.
‫Then closing this route.
‫And of course, now we need to bring that in, not found.
‫All right, so again, this last route here
‫with the star will basically be matched
‫if none of the other routes are matched.
‫So this then catches like any URL that is not matched
‫by our routes.
‫So let's say this one, and then we get not found,
‫which makes sense because none
‫of our routes really match this URL here.
‫But of course, if we go back, let's say to the route,
‫then we get back to our homepage.
‫Great, so at this point, we have basically half
‫of the single page application.
‫So we already have all our routes, but at this point,
‫we cannot really transition from them without a page reload.
‫So all we are doing here is to manually change the URL
‫and then our application goes to that page.
‫But of course, that's not what we want.
‫So you want that single page app feeling
‫where we can seamlessly transition between pages.
‫And so that's what we will implement
‫in the next lecture by linking between these pages.