Learn React-router like a PRO 😎

Hey,👋 I'm Gourav

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 ⬇ *

So, what does that mean, and why it's beneficial?🤔

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.


to learn more about router click here

Lets start building

so we will be making a simple SPA like this .the codes are self-explanatory and simple.

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

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.

Its not the end. Add your personal things /items /colors and play with the code .

---

Conclusion

🎉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 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

Thank you for reading. ;)

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

Comments

[gourav majee]

Do let me know if you've liked it or any suggestions.i would love to know.
❤️