React Routes

Last week I was helping a friend out in their final project from bootcamp and I came across React Routes. While going through their project I noticed that they had to apply React Routes and this lead me to doing more research because I wasn’t quite sure how to explain it.

In some parts of the code <Link>was used and other parts <Switch>was used and they were confused about this since their mentor helped them implement it and they weren’t quite sure what the difference between these two things were.

I ended doing some self studying to brush up on React since I was working on my own React project anyways.

After a quick lesson I came to learn more about react-router-dom. Since the page does not refresh, react router keeps the URL up to date as the user navigates through the site. This preserves the browser history, and ensures back button and bookmarks work properly.

<Link>was used to change the URL. If you put in <Link to '/about'> all this does is change the url from myapp.com/ to myapp.com/about, but that doesn’t necessarily mean the component has rendered on the page.

A <Switch> looks through all its children <Route>elements and renders the first component that matches the current URL. A nice thing to know is a <Switch> is generally used any time you have multiple routes, but you want only one to render at a time!

After a quick 5 minute tutorial on React Router Dom I was able to understand the fundamental differences between these and why it would be in code at the same time.