React-router-dom introduction

Installing and using the react-router-dom

In order to implement client-side routing we need first to install and import the react-router-dom library. In terminal hit:

npm install --save react-router-dom

Then we need to import some components like shown above in order to start implementing. Let's examine these imported components and what are they used for.

<BrowserRouter> (or the <HashRouter for some purposes) is the parent element. Anytime we want to implement different routes, we need to nest them inside the <BrowserRouter> component.

The <NavLink> component is equivalent to the <a>. Instead of reloading and fetching a new HTML page, changes the URL navigation to the given attribute (through the “to” attribute).

The <Route> indicates which component (or JSX elements) is going to be shown under a given route. This is specified through the 'path'  attribute and the component (or render for JSX) atttributes, respectively.