How to create a simple selected navbar link in react

#tutorial #react #webdev

This is something I recently learnt and thought it could be helpful, here it is:

The following is a step by step process of how to achieve the above:.

Packages Used📦

You should be familiar with the following

React-router-dom
Material UI

Details

First we create our project :

npx create-react-app simpleNav

After the project is created cd into it and install the two packages

npm i react-router-dom

npm i @material-ui/core

I like my projects to have a separate routes file called routes.js which would contain the following in this case:

export const LANDING = "/"; 

export const PERSONAL = "/for_me";

Create the Landing.js pages as component:

import React from 'react'

function Landing() {
    return (
        <div>

        </div>
    )
}

export default Landing

Create the Personal.js pages as component:

import React from 'react'

function Personal() {
    return (
        <div>

        </div>
    )
}

export default Personal

Now create the Navbar with the nav links:

import { Box, IconButton, makeStyles } from '@material-ui/core'
import { Settings } from '@material-ui/icons';
import React from 'react'
import { NavLink } from 'react-router-dom'
import * as ROUTES from '../constants/routes';

const useStyles = makeStyles({
    root:{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        paddingTop: "1rem",

        position: "sticky",
        zIndex: "1",
        top: "0",

        background: "rgba(255, 255, 255, 0.9)"
    },

    nav:{
        flex : "1",
        display : "flex",
        justifyContent : "center",
        alignItems : "center"
    },

    activeNavLink:{
        backgroundColor: "#8378DB",
        borderRadius: "15px 15px 0 0",
        color: "white !important", 
    }, 

    navLink:{
        textDecoration: "none",
        cursor: "pointer",
        padding: ".25em",
        fontSize: "1.65em",
        color: "#8378DB",
        margin: "0 1rem",
    },

    settingsButton:{
        marginRight:"2rem"
    },

    settingsIcon:{
        color: "#8378DB"
    }
})

function Nav() {

    const classes = useStyles()

    return (
        <Box className = {classes.root}>

            <Box className  ={classes.nav}>
                <NavLink
                    exact
                    activeClassName = {classes.activeNavLink}
                    className = {classes.navLink}
                    to = {ROUTES.PERSONAL}
                >
                    For me
                </NavLink>
                <NavLink
                    exact
                    activeClassName ={classes.activeNavLink}
                    className = {classes.navLink}
                    to = {ROUTES.LANDING}
                >
                    Explore
                </NavLink>
            </Box>

            <IconButton className={classes.settingsButton}>
                <Settings className = {classes.settingsIcon}/>
            </IconButton>

        </Box>
    )
}

export default Nav

Finally in the App.js import the routes file and define the routes as so:

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

//navbar containing navlinks
import Nav from './components/Nav'

//pages to naviagate
import Personal from './pages/Personal';
import Explore from './pages/Explore';

function App() {

  return (
    <div className="app">
        <Router>
          <Nav/>

          <Switch>
            <Route exact path ={ROUTES.LANDING} component = {Explore}/>
            <Route exact path ={ROUTES.PERSONAL} component = {Personal}/>
          </Switch>

        </Router>
    </div>
  );
}

export default App;