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;
Conclusion 🥂
Following up to this point you successfully created a navbar with the selected link effect, nicely done
Top comments (3)
Muchas gracias me estoy iniciando en react y me sirvio mucho tu explicacion. Muchas muchas gracias. MH desde Venezuela
Encantado de ayudar, MH
Muchisimas gracias!!!