Applying css class to active route link in react js

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import {BrowserRouter,Route,Switch} from 'react-router-dom';
import Nav from './Nav';

const contact = ()=>{
return(
<h1>Inside the contact page</h1>
)
}

const home = ()=>{
return(
<h1>Inside the home page</h1>
)
}


const about = ()=>{
return(
<div>
<h1>Inside the about page</h1>
</div>
)
}

class App extends Component {
constructor(){
super();
this.state ={
name: 'React'
};
}

render() {
return(
<BrowserRouter>
<div>
<Nav/>
<Switch>
<Route path="/" exact component={home}/>
<Route path="/about" component={about}/>
<Route path="/contact" component={contact}/>
</Switch>
</div>
</BrowserRouter>
);
}
}
render(<App />, document.getElementById('root'));

The link has been provided in Nav component

import React from 'react';
import {NavLink} from 'react-router-dom';
import './Myclass.css';
const Nav = ()=>{
return (
<div>
<NavLink to="/" activeClassName="myactive">Home</NavLink>|
<NavLink to="/about" activeClassName="myactive">AboutUs</NavLink>|
<NavLink to="/contact" activeClassName="myactive" >Contact Us</NavLink>
</div>
)
}
export default Nav;

Now Myclass.css

.myactive{
color :green;
}

By Pankaj Kumar Agarwal

Above we can see the color of home link became green. We applied class there activeClassName=”myactive”

Features of Python

Leave a reply:

Your email address will not be published.