‫So now that we understand
‫the fundamentals of styled components,
‫it's time to finally install React Router
‫and set up our routes.
‫So let's open up our terminal here
‫and then NPM install, React Router.
‫And don't forget the dom here at the end.
‫And then please go ahead and install version six.
‫So again, so that your app works
‫in the exact same way as mine.
‫And so let's now actually delete everything from here.
‫So we built already this nice looking EUI
‫but now we will just delete it all and start from scratch.
‫But of course we will still need all the components
‫that we just built.
‫But anyway, now it's time to set up our routes.
‫And in this application
‫we will not use the data loading features
‫of React Router that we used in the previous project.
‫And so therefore, we can go back to setting up all routes
‫in the way that we did it in the world wise application.
‫So basically in a declarative way.
‫And so for that, let's do it right here in a JSX.
‫So we start with the browser router component
‫and then in there we specify the routes component
‫which is the one that actually figures
‫out which route matches the URL.
‫And then for each route
‫we will again have one route element.
‫And so these are self-closing elements
‫unless they have child routes.
‫And then here we can just define the path.
‫So let's start with the dashboard, not like this.
‫And actually we already have all of our pages
‫or at least most of them right here in the pages folder.
‫So apparently we didn't import these components here.
‫All right.
‫And so here, let's then define
‫or let's use the dashboard page that we have
‫in our pages folder.
‫So dashboard, and then let's manually import that.
‫So pages and dashboards.
‫All right.
‫And since we already know well enough how this work
‫I will just duplicate this here a few times
‫and just do it for all of the pages really fast.
‫Now okay, so just make sure
‫that your routes are exactly the same ones as I have here.
‫And so then the result should be
‫that after you have everything set up, the result is
‫that the page you're looking for could not be found.
‫And so that's this last route right here
‫which will be matched if none of
‫these other URLs here can be matched.
‫And the reason for that is
‫that we actually don't have like an index route.
‫And so let's change that.
‫So let's duplicate this first one right here
‫because this is what we want to see
‫as soon as we open up the app.
‫So this should be our index route.
‫And so let's actually do that using the index prop.
‫And so then indeed, we see our dashboards nice.
‫However, here we have now this duplicate code.
‫And so usually what we do is a declarative redirect.
‫So for that, we use the navigate component provided
‫by React Router, then replace so that the URL
‫gets replaced in the history stack.
‫And then here, just the route again.
‫So this is a little bit cleaner, and the result is the same
‫well, not in the URL.
‫So now if we open up this page, it'll automatically
‫immediately redirect us to the dashboard.
‫Okay, and now finally, as you might be seeing
‫we are again missing our styles.
‫And so let's bring them back here.
‫So importing this component called global styles.
‫So let's import that here at the very top
‫Styles and then global styles like this.
‫Ah, but of course then we need again,
‫that fragment
‫because as you already know,
‫each React component can only return
‫exactly one element or one component.
‫And so that's now this fragment right here.
‫And then our styles are back.
‫Let's reload and let's test out some of the pages here.
‫For example, the bookings page.
‫And as you see, here we are actually already
‫using the heading that we created earlier
‫and also the row component.
‫Let's also check out the account, for example.
‫And so here again, we are using that row quite a bit.
‫Great.
‫And so we are done with setting up our routes.
‫And so let's move on to the next lecture
‫where we will then as always
‫build the applications layout.