Reputation: 1673
I want to add active class on click of Link
, i have applied onClick function but it is not working expected, when i click on Link it call the active_menu
function, and it change its state to true, but when the page load Dashboard again it change its state, can anyone please help me to resolve this issue ?
constructor(props) {
super(props);
this.state = {
isVisible: false,
location: [],
active_dashboard: false,
active_review: false,
active_competitors: false,
active_profile: false,
};
this.updateModal = this.updateModal.bind(this);
this.logout = this.logout.bind(this);
this.storedid = this.storedid.bind(this);
this.active_menu = this.active_menu.bind(this);
this.getlocation()
}
active_menu(id) {
if (id == "dashboard") {
this.setState({ active_dashboard: true, active_review: false, active_competitors: false, active_profile: false })
} else if (id == "review") {
this.setState({ active_dashboard: false, active_review: true, active_competitors: false, active_profile: false })
} else if (id == "competitors") {
this.setState({ active_dashboard: false, active_review: false, active_competitors: true, active_profile: false })
} else if (id == "profile") {
this.setState({ active_dashboard: false, active_review: false, active_competitors: false, active_profile: true })
}
}
<ul className="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<li className="nav-item has-treeview menu-open" onClick={() => { this.active_menu('dashboard') }}>
<Link to="/dashboard" className={(this.state.active_dashboard) ? 'active nav-link' : 'nav-link'} id="dashboard">
<i className="nav-icon fa fa-home"></i>
<p>
Dashboard
</p>
</Link>
</li>
<li className="nav-item has-treeview menu-open" onClick={() => { this.active_menu('review') }}>
<Link to="/review" className={(this.state.active_review) ? 'active nav-link' : 'nav-link'} id="review" >
<i className="nav-icon fa fa-comments" ></i>
<p>
Reviews
</p>
</Link>
</li>
</u>
Upvotes: 1
Views: 7572
Reputation: 915
Using React Hooks:
import React, {useState} from 'React'
const Menu = () => {
const [activeMenu, setActiveMenu] = useState()
return (
<ul
className="nav nav-pills nav-sidebar flex-column"
data-widget="treeview"
role="menu"
data-accordion="false"
>
<li className="nav-item has-treeview menu-open">
<Link
id="dashboard"
to="/dashboard"
className={activeMenu == 'dashboard' ? 'active nav-link' : 'nav-link'}
onClick={() => { setActiveMenu('dashboard') }}
>
<i className="nav-icon fa fa-home"></i>
<p>Dashboard</p>
</Link>
</li>
<li className="nav-item has-treeview menu-open">
<Link
id="review"
to="/review"
className={activeMenu == 'review' ? 'active nav-link' : 'nav-link'}
onClick={() => { setActiveMenu('review') }}
>
<i className="nav-icon fa fa-comments"></i>
<p>Reviews</p>
</Link>
</li>
</u>
)
}
Upvotes: 4
Reputation: 1400
You can use NavLink component from react-router. A special version of the Link that will add styling attributes to the rendered element when it matches the current URL.
<NavLink to="/dashboard" activeClassName="active">
Dashboard
</NavLink>
You can also connect withRouter. This gives the your component access to this.props.history where is the current route.
Upvotes: 2