React is now a buzz-word among developers these days and as such, there's' a huge rise in developers learning and using React in their day to day activities and projects... i don't blame them tho , its quite awesome to say the least 😎

On this post, I intend to give you a full scoop on the React Router; the inbuilt React library for routing and navigation

Let's Dive In

So how does it work?... well for those of you who really want to know what does on behind the scenes; well this library works hand-in-hand with the browsers' URL path and renders components conditionally (as you would want it) hence keeping the UI and the URL in Perfect Sync.. Cool right?

Awesome Bro! - How do we Start?

To use the React Router, you have to get it installed first using npm or yarn

npm install react-router-dom

OR

yarn add react-router-dom

Ahh yes, we will be implementing a simple Landing page with a Home and About Section. Both of them are separate components called Home and About respectively

In your React Project you write

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home'
import About from './components/About'

The block of code above simply imports the react-router library , BrowserRouter is the parent element where all your routes must be wrapped in it or else ... well that's a 404 bruh 😰... we imported it with an alias of Routerto make the code more readable, its a personal preference tho. you can do otherwise or just import it as it is .

The Switch component makes sure that ONLY ONE component gets rendered at a time, its useful for routes that have overlapping paths; there is another method of specifying paths using the exact keyword in the Route Component, more on that later.

Route on the other hand is the key player here , it is the component that does the actual routing or better still maps your component to a path.

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const App = () => {
return(
 <Router>
    <Switch>
                <Route path="/" component={Home} exact />
                <Route path="/about" component={About} />
                <Route path="/shop" component={Shop} />
</Switch>
            </Router> )

export default App

here we nest all our routes in the Router Component and use the attributes path and component to allocate the routes. the basic anatomy of the Route component is

  <Route path="/yourPath" component={yourComponent} />

optionally you can specify a route using the exact keyboard for example if you have overlapping paths for example

  <Route path="/contacts" component={Contact} />
 <Route path="/contacts/people" component={People} />

Here, if you navigate to contacts/people, both the Contact and People components gets rendered why?, cause the People component path includes the path for the Contact component. hence the router display both; to curb this we use the exact component keyword , cause they are some cases where you'll intentionally want your components to appear on the same page

  <Route path="/contacts" exact component={Contact} />
 <Route path="/contacts/people" exact component={People} />

but i know you're thinking "Great now we got routes but ...how do we get to these routes , of course you don't expect us to type these manually in the browser.."

Yea. I would never.

The Link Component Walks In...

The Link Component handles page linking just like your everyday anchor tag in HTML except the Link has a trick up its sleeve. it doesn't have to reload the page when it is used unlike its HTML counterpart. Great!

We import it from the react-router-dom package just like we do with the BrowserRouter and Route

import {Link} from 'react-router-dom'

and we use it just as we do with the anchor tag Let me illustrate with a Navigation Bar example

const Nav = () => {
  return (
    <React.Fragment>
      <Link to="/home">Home </Link>
      <Link to="/about">About </Link>
    </React.Fragment>
  );
};

export default Nav

for example, when Home is clicked and it navigates to /Home, the Route we set up earlier immediately comes into play and renders the Home component we specified... yea its all coming together

and thats the React Router for you!! Thank you for your time and please if you have any questions or things you think i missed, Let me know in the comment section below.

Adios! ✌