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
.
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.
Top comments (0)