Beginner's guide to React Routing

Hey ! What's up everybody....

In this blog we are going to talk about the react routing fundamentals .

What React routing does

So , React routing , allows us to build a single-page web application with navigation without the page refreshing as the user navigates. React Router uses component structure to call components, which display the appropriate information .

Install react-router-dom package

To work with react routing you need to install react-router-dom package via npm or yarn package manager.

• npm i react-router-dom ( instead of install we can use i also)
• yarn add react-router-dom

Add routing to your project

To work with client side routing in react we need to import some modules from react-router-dom package . check the code snippet below..

//using ES6 modules
import { BrowserRouter , Route, Switch , Link } from "react-router-dom";

<BrowserRouter>
                 <Switch>
                          <Route path="/about"  exact    component={About}>
                          <Route path="/contact"  exact component={Contact}>
                          <Route path="/" exact component={Home}>
                 </Switch>
</BrowserRouter>

some important points

• exact keyword tells react to match the exact route .
• component tells react which component to render on route.
• Switch plays and important role because without the switch it will keep on searching and renders every component in single page .

This is the first part of react routing . I will be sharing the second part soon