‫So, let's now create some links
‫between our different routes
‫in order to really turn our application
‫into a single page application.
‫So to start, let's say that on our homepage
‫we want a link to the pricing page.
‫So, how are we going to do that?
‫Well, let's try with the most obvious idea
‫that we might get which is to simply
‫create an anchor element here.
‫Basically creating a link in the traditional way.
‫So lets wrap this here into an h1,
‫and then after that, as I was just saying,
‫let's just create an anchor with the href property,
‫and maybe pointing to pricing.
‫Now lets close that
‫okay.
‫Now that's really huge again, right?
‫But anyway lets now try to click this and see what happens.
‫So, it actually did move to that page
‫but if you watched closely
‫then maybe you noticed that the whole page
‫actually reloaded.
‫So lets, see that again.
‫And so lets notice what happens really
‫when I click here.
‫So the page got reloaded and as we can also probably see
‫here in our network tab.
‫So if we select all here, and then do this
‫and come back, and clear this.
‫So again, I click here and you see that
‫all these different requests have been made.
‫And so this is not what we want.
‫We don't want any hard refreshes of our page.
‫But instead, we want to seamlessly move
‫from one page to the other
‫simply by replacing the dom content here on our page.
‫So, this is not what we want
‫so lets get rid of it and instead
‫we will now use the link element that is
‫once again provided by react router.
‫So, lets do that and lets make sure that it got imported.
‫And now here we can use the 'to' prop.
‫And so this is where we then specify /pricing
‫and it's important that we specify the slash here
‫so that our URL always starts from the root.
‫So basically we've got root/pricing.
‫Okay, so lets go back and let's reload here.
‫And now watch what happens as I click here
‫down there.
‫So I click, we moved to another page,
‫and we got no new requests except this svg here
‫for some reason, but that really doesn't matter.
‫So the only thing that really happened
‫was that all dom got replaced.
‫We can also see that nicely in our component tree now.
‫So lets go back, so now we have our home page
‫and as I click here
‫notice that the only thing that changed
‫was that immediately here our component tree changed.
‫Okay, and so that's how we use the link component
‫from react router to seamlessly transition between pages.
‫Making this now, a single page application.
‫Great, so
‫we can move now from the home page
‫to the pricing page
‫but what about all these other pages?
‫Well, lets just implement a page navigation,
‫which we can then reuse in all these pages here
‫so that we can transition between them.
‫So that's going to be a new component
‫but not a new page.
‫And so, let's come here and create a new folder
‫called "components", and so this is where
‫we will then create our PageNav.gsx component.
‫So lets scaffold that, and now here
‫we don't want a dif but a nav component.
‫And then lets do an unordered list,
‫and then, inside each list item
‫we are going to have one link to one of the pages.
‫So again, coming in here from react router dom
‫very important to not forget that,
‫and then, let's do one link to the homepage
‫and then I will just duplicate this a few more times.
‫So we have also
‫pricing
‫and lets do the product page.
‫Alright, and so now is a reusable component
‫that we can include into every single one of our pages.
‫So lets do that right here before the h1
‫and we could actually also include that
‫right here in the app.
‫So that would be perfectly valid as well.
‫So basically placing that right here
‫but the pages that I built
‫and that it will include here a bit later,
‫actually only work if we have the navigation
‫inside each of them.
‫And so, that's what we will then do now
‫just as I was saying.
‫So let's include that here
‫PageNav and this time here, vs code
‫is actually nice enough to automatically import
‫that here.
‫So, let's do it actually in all of them.
‫So let's include that right here
‫and now this is not in its own element
‫but, well that doesn't really matter.
‫Especially not in that uh component right there.
‫And here, let's just place that and some h1 element
‫and then let's copy the same thing also to
‫product, alright?
‫So, you know what it's best not to do that
‫because then we have to manually include the component
‫and that's too much work.
‫Okay,
‫and so
‫let's see.
‫Again, making it a bit smaller
‫and now
‫yeah, beautiful.
‫So we can really now seamlessly navigate
‫through our application
‫and nothing reloads
‫and it feels just really nice.
‫So our URL updates here
‫and therefore, if we now reload at exactly this place
‫then the page that we get back is back at pricing.
‫And so this then allows us, to for example,
‫share this URL with some other users
‫or to even bookmark this page.
‫And it will then each time,
‫come back to this exact page.
‫And so that's really really helpful.
‫Now, one thing that we do many times
‫in navigations like this
‫is to display which is the currently visited page.
‫So for example, highlighting right now
‫the pricing page
‫since this is the page that we are visiting.
‫And so, actually react router gives us
‫a tool for that.
‫So instead of using the link
‫we can use a NavLink element.
‫So, NavLink
‫like this
‫and let's remove this one
‫and replace all of them with NavLink.
‫And so, once again, I just selected all occurrences
‫here
‫with
‫here with this shortcut.
‫So this one I use all the time
‫really really important for any development
‫react or really anything else.
‫And so now, it works exactly the same thing
‫as before, but if we inspect this element
‫then we see, that, I think we had some space
‫so then we see that the currently active page
‫gets this class of active.
‫And so then in our css we can select this class
‫and style this element differently.
‫So this other link for example, the home,
‫that one does not get this class.
‫So if we change to product,
‫then it will be product who has that class.
‫Now, for now we don't have any css yet
‫because we will learn how to use a different way
‫of incorporating css into a project this time
‫but later, once we have that
‫then, we will be able to style this active class.
‫And speaking of css, that will actually be
‫the topic of our next lecture.
‫So how we can use different ways of css
‫in our applications
‫and so lets move there right now.