DEV Community

loading...
Cover image for Learn React-router like a PRO ๐Ÿ˜Ž

Learn React-router like a PRO ๐Ÿ˜Ž

gourav majee
I like to Code
ใƒป4 min read

Hey,๐Ÿ‘‹ I'm Gourav

react-router
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

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.
ezgif.com-gif-maker (1).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

Enter fullscreen mode Exit fullscreen mode

navigate to our directory

cd gourav-spa
Enter fullscreen mode Exit fullscreen mode

( 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";
Enter fullscreen mode Exit fullscreen mode

( 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;

Enter fullscreen mode Exit fullscreen mode

( 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;

Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Now it would look like this.great job
12.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>
Enter fullscreen mode Exit fullscreen mode

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

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.๐Ÿ’–

Discussion (1)

Collapse
varuogm profile image
gourav majee Author

Do let me know if you've liked it or any suggestions.i would love to know.
โค๏ธ