React routing with react-router library And Responsive Navbar in react js

This is a simple tutorial of developing a responsive navbar in react js from scratch and using the react-router library for routing

Requirements and steps to set up react js project:

1. Create a react app : npx create-react-app app_name
2. Install react-router library in it: npm install react-router-dom
3. Let’s code!

The project architecture is:

|-app_name
  |-node_modules
  |-public
  |-src
    |-components (it is going to contain different pages)
      |-Home.js
      |-Blogs.js
      |-About.js
      |-header
        |-Header.js
        |-header.module.css
  |-app.js

Let’s first create routing:

app.js
import './App.css';
import Header from './components/header/Header';
import Home from './components/Home';
import About from './components/About';
import Blogs from './components/Blogs';
import 
{
BrowserRouter as Router,
Route,
Switch
}from 'react-router-dom';
function App() {
  return (
      <Router>
          <div>
            <Header />
            <Switch>
               <Route path='/' exact component={Home} />
               <Route path='/about' component={Workshop} />
               <Route path='/blog' component={Blog} />
            </Switch>
         </div>
       </Router>
   );
};
export default App;

Here, we used <Switch> element as a parent element of <Route> to not render two paths at a time. Like if we will enter /about in the URL the react will render home and about at the same time because the home page’s path also contains /.

And we used exact in the Route for home because if we didn’t do so then we will not be able to render the /about and /blog page and so on because the switch will only render the first path it finds in the URL.

Example, URL : localhost:3000/about , react will only render till localhost:3000/ and ignores the about as it found the component for this path first.

And Congratulations! we are done with our routing part.

Now, Let’s code for responsive Navbar and add our routing to it:

components/header/Header.js
import React, { useState } from 'react';
import styles from './header.module.css';
import { Link } from 'react-router-dom';
const Header = () => {
    const [clicked, setClicked] = useState(false);
    return (
         <div
            className={
              clicked
              ? `${styles.nav} ${styles.responsive}`
              : `${styles.nav} ${styles.desktop__nav}`
            }
          >
         <ul>
            <Link to='/' className={styles.list}>
                  <li>Home</li>
            </Link>
            <Link to='/workshop' className={styles.list}>   
                 <li>About</li>
            </Link>
                 {!clicked && ( 
                    <Link to='/' className=
                        {`${styles.list}${styles.logo}`}>
                          <li>LOGO</li>
                    </Link>
                  )}
            <Link to='/blog' className={styles.list}>
                 <li>Blog</li>
            </Link>
            <a className={styles.icon} onClick={() => setClicked(!clicked)}> 
                  <i className='fa fa-bars'></i>
            </a>
        </ul>
      </div>
     );
 };
export default Header;

Here are few tricky things we have done here:

1. const [clicked, setClicked] = useState(false); Why we are mainting this state? This state is to open and close the navbar in the mobile view.

2. className={ clicked ? `${styles.nav} ${styles.responsive}` : `${styles.nav} ${styles.desktop__nav}`} , why this conditional operator? This conditional operator will let the navbar show and hide in the mobile view with the help of the class. As responsive class contains the CSS of the mobile view navbar.

3. <Link to=’/’ className={styles.list}><li>Home</li></Link> What does this line? Link is a component we get from react-router-dom the library to link our navbar item with the route we got from routing. And we do so with to attribute in Link.

4. <i className=’fa fa-bars’></i> this is the hamburger icon to show in the mobile view. To use this don’t forget to write this piece of line in public/index.html:

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Now add some Styling:

components/header/header.module.css
.nav {
  overflow: hidden;
  background-color: #669c2a;
}
.desktop__nav{
  display: flex;
  justify-content: center;
}
.nav .list,a {
  list-style-type: none;
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-weight: 800;
  font-size: 17px;
}
.nav .list:hover {
  border-top: 2px solid rgb(206, 206, 49);
  border-bottom: 1px dotted rgb(206, 206, 49) ;
  color: yellow;
  cursor: pointer;
}
.nav a.icon {
   display: none;
}
@media screen and (max-width: 600px) {
  .nav .list {
    display: none;
  }
  .nav .logo{
    display: block;
  }
  .nav a.icon {
    float: right;
    display: block;
  }
}
@media screen and (max-width: 600px) {
  .nav.responsive{
    position: relative;
  }
  .nav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .nav.responsive .list {
    float: none;
    display: block;
    text-align: left;
  }
}

END RESULT:

Navbar in Desktop View

Navbar in Mobile view

Open Navbar

Thank you for reading!

Please leave comments if you have any suggestion/s or would like to add a point/s or if you noticed any mistakes/typos!

P.S. If you found this article helpful, clap! 👏👏👏 [feels rewarding and gives the motivation to continue my writing].