‫Now it's time to finally go back
‫to React Router and to a new way of implementing routes.
‫So React version 6.4 introduced a whole new way
‫of defining routes and of working with React Router.
‫So from now on we can use some powerful mechanisms
‫inside React Router for fetching data
‫into pages and for submitting data using forms,
‫so all within React Router.
‫Now, to enable this, we need to define our routes,
‫as I just said in the beginning,
‫in a completely different way.
‫And so to show you how it works,
‫let's start by installing React Router.
‫So opening up a new terminal,
‫let's do npm install react router dom.
‫And then here it's important that you do version 6.
‫All right, and while this is installing,
‫let's open up actually the React Router documentation.
‫So once you start working with these professional
‫React development libraries,
‫it's very important that you start getting into the habit
‫of always working with the documentation.
‫And so React Router is, of course,
‫one of those third-party libraries that we use all the time.
‫So first off, here in this case,
‫you can select the current version appear in the selector,
‫and then here we have the navigation.
‫And so the function that I just mentioned
‫we are going to need is this one,
‫so createBrowserRouter.
‫And so if you want, you can then check out
‫the documentation here for this function.
‫Or you can also here learn first
‫how to actually pick a router.
‫But I would say if you want to work with data fetching
‫in React Router, you are most likely going to need this one.
‫Okay, so let's actually use that function
‫outside the component here,
‫so createBrowserRouter.
‫And so now that got, of course,
‫imported from react router dom.
‫And so this is a function now where we define all routes,
‫and we do that by passing in an array of objects
‫where each object is one route.
‫So let's start here with the Homepage.
‫And so we define the path property.
‫And so let's set it here to the root path,
‫and then here we define the element.
‫So here now we want to use this Home component here
‫as the Homepage.
‫So let's place this here,
‫and then we need to also import this
‫like this.
‫So import Home from,
‫and then it's inside ui and inside Home.
‫Now, for now, nothing changed here
‫because we haven't actually used the results of this yet.
‫But before we do that, let's just add another one here.
‫So let's now add the menu.
‫And so this path here is basically
‫exactly the same as before.
‫So in the other, let's say,
‫more traditional way of defining routes.
‫And so here we will want the menu component
‫that is right here.
‫So...
‫So menu, and for some reason here
‫the automatic imports are not working now.
‫So here that's inside features menu and then dash Menu.
‫And it's also called Menu, of course.
‫So with this, we have created our browser router,
‫but we are actually not doing anything with it yet.
‫So let's start by saving the result of calling this function
‫into a variable called Router.
‫And then here inside our application,
‫let's now then place this router.
‫And so let's return, and then here, again,
‫a new component which is called RouterProvider.
‫So this one right here.
‫And so then this one takes a prop
‫where we pass in that router that we just created.
‫And so there it is.
‫So this is now our Homepage.
‫And so this text that you see there
‫is exactly what we have here inside the Home component.
‫Let's try to go to /menu, and indeed there is our menu.
‫And so our new router is now working.
‫Now I just want to quickly compare the way that this looks
‫with the more traditional approach.
‫So let's come back here to our WorldWise application
‫and then the App.js file, let's open it inside VS Code.
‫So remember that here we declare routes
‫in this declarative way.
‫So we use the really the BrowserRouter component
‫and Routes and Route where we then define the path itself
‫as a prop.
‫So here we are doing it more in an imperative way.
‫So we're declaring the router outside of the JSX
‫and using this JavaScript array right here.
‫And this is necessary in React Router 6.4
‫in order to enable data fetching
‫or data loading with React Router.
‫So this old way still works
‫even in the modern React Router,
‫but then we cannot use it to load data
‫or to submit data using forms.
‫So all these new data loading capabilities
‫are enabled and are only possible to use when we create
‫a router using this createBrowserRouter function.
‫Alright, but anyway, let's keep going here,
‫and let's basically create all our routes,
‫so all the pages that we talked about
‫in the planning lecture.
‫So here the element is going to be this cart page.
‫And then our other pages will be to create an order
‫and to fetch data about an existing order.
‫So again, just like we planned before
‫in one of the first lectures of this section.
‫So now we are just putting that into practice here
‫and writing it into our code.
‫Okay, so let's actually immediately import
‫all of those components here.
‫So features, cart, and then Cart.
‫Then here CreateOrder
‫from features, order, CreateOrder.
‫And then here, let's do the same for the Order.
‫Okay.
‫So another path.
‫And here let's remember we decided to create this route,
‫so /order/new to create a new order.
‫So CreateOrder.
‫And finally we also had the path
‫to check out an existing order.
‫And so that's order.
‫And then here we can, just like before,
‫define params with this colon and then the param name.
‫So that's just orderId.
‫And then here the element is just the Order.
‫And so since we don't have any links between the pages yet,
‫I will just manually try this here.
‫So here we have the cart.
‫Here actually there is a link, so which brings us back
‫to the menu, and beautiful.
‫That works. Then here, let's do order/new.
‫So here we have to order form.
‫And then here we can also pass in that orderId.
‫So this one probably doesn't work yet,
‫and so we get this error here.
‫But we will take care of that a bit later.
‫So notice how in debt new router that we just created,
‫we didn't do one path here as a fallback,
‫so this path with this star
‫where we then used PageNotFound.
‫So again, here we don't need to do that
‫because we will have a special way of handling errors,
‫so for example, when a certain page is not found.
‫Okay so just to recap, in the new React Router,
‫since version 6.4, if we want to use the new powerful APIs
‫like data loaders, data actions, or data features,
‫we need to create a new router using this new syntax.
‫So specifying an array of objects
‫where each object is now the route,
‫so a correspondence between a path and the component
‫that we want to display in the user interface.
‫And we then provide that router object here
‫using the RouterProvider component.