Okay, now it's time to take a look at routing in our application.
Now we're working with a single page application.
We've only got a single page, and we don't have any other pages to navigate to.
So we can't use traditional routing where we would just click a link and be taken to another HTML page.
We need to route between components in a react application.
Now react is just a library.
It doesn't come with any functionality that helps us with routing.
So we do need to go out there and install a helper package to help us route between our components.
We can use kind of conditionals and do this without using a package, but it gets very messy very quickly,
and the de facto way to do it in a react application is to make use of React Router.
Now, the version that we're currently on with React Router is 6.4, and whilst it used to be just a
routing solution, it's become a bit more bloated nowadays and have added new features that aren't really
related to routing and things like keeping our user interface in sync with our data.
Now we're going to use something else to handle that side of things.
So we're just going to use React Router as a router.
That's what its purpose originally was.
And that's what we're going to use it for in our application.
So if we click on Im new we'll get taken to a tutorial.
And it tells us what we need to do here.
And all we really need to do is just install React Router Dom.
That's what we're going to do.
And then we're going to configure React Router to work with our application so that we can navigate
between components.
So I'm just going to copy this into my clipboard I'm going to head over to VS code.
I will open the terminal.
And please make sure you're in the client folder as we're installing packages into our application.
Now I fully expect this to fail because I am using react 19 release candidates.
And we've seen that legacy peer dependencies warning already.
I'm expecting to get it again.
If you're on react 19 the stable version then it should just work.
But let's give it a go.
And sure enough, I need to add the switch so I will add the required switch and say dash dash, legacy,
dash peer, dash deps and press return and this will get it installed successfully.
So great.
Now we've got the routing functionality installed, but we don't really have too many components that
we can actually route to yet.
So as part of this, we will create some additional components inside our project and inside the features
folder I'm just going to right click say New File.
And I'm going to have an about folder.
And this is going to contain an about page dot TSX components.
And I'm just going to use the snippet to create.
Or I'm going to try to use a snippet and use the snippet to create the react components with the about
page.
I'm not going to change anything inside here.
We'll just have the div left as it is, and we're not really going to have an about page.
We'll use it for something different, but just so that we've got some links to display at the top of
our nav bar, we will have an about page.
I'm also going to do the same and say contacts forward slash Contact page.
TSX and again I'm just going to use the snippet to create the component.
We'll also have another page and I'm going to have a folder called home and say forward slash and say
home page dot TSX.
And once again we won't do anything with this really.
We're just going to have the boilerplate for our react component and do nothing else with it just yet.
And also inside the catalog I'm just going to right click say New File.
And we're also going to have a product details dot TSX component as well.
And same thing again I'll just use the snippet to get that populated.
So let's make use of React Router and set that up in our application inside the app folder.
This is related to our application as a whole.
I'm just going to right click say new File and say routes forward slash and then routes dot TSX.
This is going to be a react component.
Or we need to give it the TSX because we're going to use react functionality inside here, particularly
react components, of course, because these are what we're going to be routing to.
So I'll press return to create that.
And material UI gives us this little routing icon because it recognizes that we've called our file routes
TSX.
And inside here I'm going to export a const called router equals.
And then we're going to use a function we get from React router Dom called Create browser router.
There are different versions of React Router.
There's one for React Native.
But we want the browser functionality because we're creating a browser based application.
So I'll press return and that gets the import in from React Router Dom.
So I'm just going to open up parentheses.
And this takes this function takes an array of root objects that we can see there.
I'll open square brackets press return and then we can start defining our routes.
Now the first route we need is the root Route, which sounds silly when I say it with the English pronunciation
of routes or British pronunciation of route, but it's going to be the route route, if that makes more
sense.
So the one at the top of the tree, or if we're talking about roots of trees, I guess they're at the
bottom.
But this is going to be our root route.
I'll try and make it clear as we go along.
But anyway, we're going to have a path and that's just going to be a forward slash inside quotes.
And then we specify the elements we wish to load up when this route is triggered.
So we specify the element.
And inside here we specify the component we wish to load.
And this is going to be our app component.
And our routes routes will specify children.
And then we'll open up square brackets.
And this is going to take the routes of our different components inside here.
So we're going to specify curly brackets.
Again specify the path.
And this is going to be the route for our home page.
So it's just going to be empty quotes here, nothing else.
And we'll specify the element we wish to load.
And that's going to be the home page.
And I'll add the closing tag.
Now I'll just add a comma after this.
And we'll just add four more routes inside here.
So the second one this is going to be for our catalog.
So I'm going to specify forward slash.
That forward slash is important.
So please include that.
And this is going to load up the catalog component.
Now I'm getting an error here.
And why am I getting an error.
Well it's telling us that this is expecting a product property.
And we haven't included it with the catalog.
So we're going to need to make some changes to our app to accommodate this and the functionality that
we have currently in our app component.
I'm going to move it to the catalog.
Technically it would be possible kind of, although not really a good idea to put that functionality
inside our routing file so that we could pass the products down, but I think that would be a terrible
idea, and we're just not going to do it that way.
We'll simply move the code to where it's most appropriate, which is in the catalog itself.
But I'm going to ignore that warning for now, and we'll fix it soon.
We'll just get our routes in place.
First of all, the next route is going to be forward slash, catalog, forward slash and then colon
ID now this colon ID is effectively a placeholder for the product details is what we're going to use
this for.
So I'll add the component inside here for the product details.
But effectively in order to get to the product details component then this would be catalog forward
slash two or catalog forward slash three.
And the ID is a placeholder for the route parameter that we use to get to a specific product, so that
we can load up the details of that product.
The next one we'll add is just the abouts, and we'll just use the about page as the component there.
And we'll also have forward slash contacts.
And we'll specify the contact page inside here and do double check.
Your imports have come in correctly now.
Of course we've got an error with the catalog page, because if we open up the catalog.
And by the way, another way to get to a component is you can just right click and go to definition.
Or if you want to use the shortcut key there's an F12 option to go to the definition.
And this will take you directly to the catalog component.
So just another way of navigating here.
So the issue we've got with our catalog of course is products is required because it's not optional.
If we wanted to make that optional we would need to use the question mark there.
But then we've got further problems because TypeScript is going to help us and say, hey, products
is possibly undefined and you've passed it to this product list.
So we don't want to make that optional.
We in fact, we don't want to pass props into here at all.
So I'm actually going to remove the products from the props in the catalog component.
And I will go back to the app component to the app dot TSX and let's move the products code into the
catalog components where we've got our usestate here.
I'm going to cut the products from there and go to the catalog and paste it inside here.
And I'll just bring in the import for Usestate.
And then I'll go back to the app component and see what else we need to move.
And we also need to move the Useeffect.
So I'm just going to cut this from there.
Go back to the catalog and we'll specify the useeffect inside here.
And we also need to bring in the Useeffect from react as well.
So we get that import at the top.
So that cleans up the code in our catalog.
But now we've got some issues in our app.tsx of course.
And we can remove the passing down of the products to the catalog inside here.
And we can clean up anything we're not using at the top as well.
So that's the Useeffect as well inside here.
Now, if we go back to our roots, what we should find is that the warning has gone away.
So that's almost all of the configuration set up, but we want our app component to load when our application
loads.
And if we go to our entry point for the application, I'm just going to open up the main dot TSX.
We've got our app inside here.
Now we need to use the router provider that we get from React Router instead.
So we specify router provider inside the strict mode.
And we give this a property of router.
And we're going to set it to the router that we created that we get from app routes routes.
So do ensure that's been brought in.
And we'll just clear out the import layer.
And one more thing to go before we can test this.
Now we don't have our app component being loaded up.
When our application loads.
It's going to be loaded by the router provider.
So let's go to the app component because inside here this is where we specify an outlet.
So instead of catalog here we're going to use outlet which we get from React Router Dom.
And what this means is when we navigate to a specific route inside this container, we have our outlets.
And when we navigate to let's say the catalog, then outlet is going to be replaced with our catalog
component.
If we navigate to our about page then again outlet is going to be replaced with the about page.
Now we can test this.
We don't have any links to click on yet, but if I just refresh the page, I can see that I'm on my
home page and I can see the home page text.
If I say forward slash about in the URL and press return, I can see I'm taken to the about page and
if I specify catalog, then I can see that I'm loading up the list of products.
And if I say catalog forward slash two, then I get taken to the product details component.
So that's the routing functionality working.
And what we'll take a look at next is well giving the user something to click on because we don't expect
them to use the URL to navigate around our application.
And we'll take a look at that next.