Beginner's guide to  React Routing

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