Set up navigation using React Router DOM

React router is a library that allows you to handle routes in a web app, using dynamic routing. Dynamic routing takes place as the app is rendering on your machine, unlike the old routing architecture where the routing is handled in a configuration outside of a running app.

React router implements a component-based approach to routing. It provides different routing components according to the needs of the application and platform.

React Router DOM is DOM bindings for the React Router, or in simpler terms React Router for websites.

Installation

React Router can be installed using the npm cli utility:

>npm install react-router-dom

‍

Implementation

1. Set up your app to work with React Router by wrapping the app in <BrowserRouter> element. Everything that gets rendered goes inside the <BrowserRouter> element tag. We will create four components. Inside <Switch>, which is basically a switch case in react, define all routes for your website and the components they are directed to.

This can also be done in the followinf way:

<Route path="/" component={Home}/>

2. Using <NavLink> you can wrap and make that component point to the specified route defined in App.js through 'to' property.

‍

And there you go!