Learn React-router like a PRO 😎
Tags: react, tutorial, javascript, reactrouter
Published: 2021-06-06 07:22:18


  **Hey,👋 I'm Gourav**

![react-router](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/59816qp9rfxe97jg0taq.gif)
By the title, you might have guessed it right what things we will be discussing. what is react-router, SPA!.!


## Well, the first question arises what is *Single Page Application* 💡? 

When a user runs an application and click on links, the content of the page changes, but the page does not reload, i.e., the user stays on the same page for the entire time; such application is called a Single Page Application or SPA's.

*A simple illustration is given below ⬇  *

![HOME.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1622891631593/TxnmggJz8.png)


## So, what does that mean, and why it's beneficial?🤔
<br>
 

The main benefit is `Performance` .
It works inside the browser and does ***not require page reloading during use***. 
You use many SPA applications like Facebook, Twitter even some parts of the application in which you are reading this Dev/Hashnode.

### React-Router - 
React-Router matches the URL and loads up the component for that particular page.
<br>
to learn more about router click [here](https://www.freecodecamp.org/news/react-router-tutorial/) 


<br>
# Lets start building

so we will be making a simple SPA like this .the codes are self-explanatory and simple.
![ezgif.com-gif-maker (1).gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1622869757972/JDiFmJ6Pp.gif)


## Setup the project





**( step- 1 )**
Open the terminal in your code editor and install react & also install router dom package. 

```
npx create-react-app gourav-spa
npm install react-router-dom

``` 
navigate to our directory 
```
cd gourav-spa
```

**( step- 2)**

Next, we import the essential components from react-router-dom. We do this in the App.js file
```
import { BrowserRouter as Router,NavLink, Route } from "react-router-dom";
```

**( step- 3 )**

So now let's get into our App.js and start building our skeleton.

> The way React Router works is by defining the region, in which there will have two things:
 >   1. our navigation links
 >   2. container to load our content into

```
import { BrowserRouter as Router,NavLink, Route } from "react-router-dom";
import './App.css';

function App() {
  return (
    <Router>
      <div>
        <h1>Hey there everyone, I'm gourav 👋 </h1>
        <ul className="header">
          <li><NavLink to="/">Home</NavLink></li>
          <li><NavLink to="/Fav">Fav</NavLink></li>
          <li><NavLink to="/About">About</NavLink></li>
        </ul>
    </Router>
  );
}
export default App;

```

**( step- 4)**

Before making routes let's make our home, fav, about pages first, and then we will connect them afterward.

I'm assuming we know the basics of react and familiar with ESconcepts. let's make our navigation pages.


### Creating Home.js

```
import React from "react";

const Home = () => {
  return (
      <div>
        <h2>This is home page</h2>
        <h3>
          there is nothing much to say. 
          this is a simple home page
        </h3>
        <p>i hope this helps you out in learning this topic.</p>
      </div>
  );
};
export default Home;

```


### Creating Fav.js

```
import React from "react";import React from "react";

const Fav = () => {
  return (
      <div>
        <h2>My fav things</h2>
        <p>there are so many things .here are some of them</p>
        <ol>
          <li>eating fruits 🥭🍇🍉</li>
          <li>memes 🔥</li>
          <li>tweeting ✨</li>
          <li>multiplayer games 🎮</li>
          <li>etc..</li>
        </ol>
      </div>
  );
};
export default Fav;

```

### Creating About.js

```
import React from "react";
let gouravpic ="https://pbs.twimg.com/profile_images/1393097871960854530/JEo6JhS1_400x400.jpg",
twitter= "https://twitter.com/Varougm",
github =" https://github.com/varuogm/";

const About = () => {
  return (
      <div className="both">
         <h2>About</h2><br/>
         <div>
            <img className="image" src={gouravpic} alt="img" />
         </div>
        <div className="data">
            <h3>Name - Gourav Majee</h3>
            <h3>Student , CS ungrad</h3>
            <h3>Developer </h3>
            <h3>twitter :<a href={twitter}>here 🐦</a>  </h3>
            <h3>Github :<a href={github}>here </a> </h3>
        </div>
      </div>
  );
};
export default About;

```
## lets add some css to make it pretty🎀
```
body {
  background-color: #4b93cd6b;
  padding: 20px;
  margin: 0;
}
h1, h2, p, ul, li {
  font-family: sans-serif;
}
ul.header li {
  display: inline;
  list-style-type: none;
  margin: 0;
}
ul.header {
  background-color: rgb(0, 0, 0);
  padding: 0;
}
ul.header li a {
  color: #FFF;
  font-weight: bold;
  text-decoration: none;
  padding: 20px;
  display: inline-block;
}
.content {
  background-color: #FFF;
  padding: 20px;
}
.content h2 {
  padding: 0;
  margin: 0;
}
.content li {
  margin-bottom: 10px;
}
.image{
  float:left; width:250px; height:250px; margin-right:55px;
}
```
Now it would look like this.great job
![12.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1622868336721/2WFOk0iqE.png)

## But gourav.. it's still not navigating us to our desired path

yes because we haven't set up the Route paths yet.

```
// add this in your app.js file under your nav links div
 <div className="content">
        <Route exact path="/" component={Home} />
        <Route exact path="/fav" component={Fav} />
        <Route exact path="/about" component={About} />
</div>
```

the Route component contains a path prop. The value you specify for the path determines when this route is going to be active. When any route is active,the component specified by the component prop gets rendered. 

we have used exact path so that it returns the route if the path is an EXACT match.

## So our SPA is ready. let's see how does it look like.

![ezgif.com-gif-maker (1).gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1622869757972/JDiFmJ6Pp.gif)

*Its not the end. Add your personal things /items /colors and play with the code .*
<hr>
# Conclusion
 <br>
#### 🎉That brings us to the end of this demonstration of how we can build single page application with react-router 🎉Congrats.


*I think you'll agree that it was a reasonably easy thing to set up. The next step might be to play around with the router, switches to have a grip on those.*

 If you've enjoyed this article  `≧◠‿◠≦✌` or You have any questions then contact me  [@Varougm](https://twitter.com/Varougm)  where I'd be more than happy to answer you  💖  . I'm new to this.if you find any mistake please let me know ✌.

Buy me my first coffee  [here](https://www.buymeacoffee.com/Gouravmajee)

### Thank you for reading. ;) 

Thanks DEV for giving me place to post my article.💖