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