Upgrade your React game with TypeScript: Routes

Hello there! This is the part of the tutorial where we make navigation magic ✨ happen.

In order to start, we first need to add some dependencies to our project with npm i react-router-dom @types/react-router-dom.

If you remember, in our Menubar component we have everything set up so we could navigate between two links: / for Home and /dates for Tour Dates.

Let's create those.

In your src folder, create a Pages folder and inside create two files: Home.tsx and TourDates.tsx. We're using the .tsx extension instead of the .ts because the first one will allow us to use JSX.

For now, I'll leave both components really simple but you can go and add whatever you want on them.

Great, now we have our two components all typed up and pretty. Now, we have to create a Routes.tsx where we place all of our preferred routes.

In this case, our Routes.tsx would look something like this.

And finally, we have to make sure we add our Router component to make everything happen in App.tsx.

And ✨ that's it! You can now go back and forth between \ and \dates in your Menubar.

Dulce, my local PM, checking out your cool routing

I hope you found this helpful, stay safe and please remember to take a break.

Got something to add? Please feel free to reach out for any question, comment, meme or dog photos swap.