navlink react id code example
Example 1: how to make react router Link active
const Router = () => (
<BrowserRouter>
<div>
<Nav>
<NavLink exact={true} activeClassName='is-active' to='/'>Home</NavLink>
<NavLink activeClassName='is-active' to='/about'>About</NavLink>
</Nav>
<Match pattern='/' exactly component={Home} />
<Match pattern='/about' exactly component={About} />
<Miss component={NoMatch} />
</div>
</BrowserRouter>
)
Example 2: multiple path name for same navlink
import React from 'react';
import { useLocation } from 'react-router-dom';
export default () => {
const { pathname } = useLocation();
return (
<li className='Navigation__list-item'>
<NavLink
to="/events"
isActive={() => ['/events', '/myevents'].includes(pathname)} >
Events
</NavLink>
</li>
);
};