React Router in your React JS project

those links at the tops. That’s routing for you.

Alright then. One more post, but this, focusing on routing in React JS. I need to take a break from these blog posts, but I am a man on a mission. Got to finish.

As usual, the code is available here. reactrouterdomhelloworld.

React is tightly married to it’s single page application policy. Then again, what is life without all the drama that comes with having a router in your life.

Before you begin, I hope you already know how to create and run a simple React JS. If not, check my earlier post. Right then, as always, add the necessary libraries.

npm install react-router-dom
npm install history

These two libraries, go hand in hand. the first one helps you with the routing. Second one helps you with the history of routing. That is what helps you click on the ‘back’ button in your browser.

Now, you need to attach the router component, right at the root of the project. For that, you need to do the following.

Once you have ‘encapsulated’ the entire App in the Router component, next comes the actual routing maps. It would look something like this.

Now, the router library comes with a fairly cool feature. That is the ‘Outlet’ feature. Here is how that looks. And, this is another reason why, the root, always points to the Layout.

Layout is where we build our menu, and that is where we have the Outlet that shows the component.

and it cannot get more simpler than that.

I work as a full time freelance coding tutor. Hire me at UpWork or Fiverr or Stack Overflow. My personal website is here. Find more of my art at Behance and Unsplash. Also, I have a Podcast about everyday life. And, a 2nd Podcast, where I talk about freelancing.