import { NavLink } from 'react-router-dom';
function NavBar() {
let activeStyle = { color: 'green', textDecoration: 'underline' };
let activeClass = 'activated';
return (
<nav>
<ul>
<li>
<NavLink
to='messages'
style={({ isActive }) => isActive ? activeStyle : undefined}>
Messages
</NavLink>
</li>
<li>
<NavLink
to='tasks'
className={({ isActive }) => isActive ? activeClass : undefined}>
Tasks
</NavLink>
</li>
</ul>
</nav>
);
}
function NavBar() {
return (
<nav>
<ul>
<li>
<NavLink
to='/messages'
style={{ color: 'blue', textDecoration: 'none' }}
activeStyle={{ color: 'green', textDecoration: 'underline' }}>
Messages
</NavLink>
</li>
<li>
<NavLink
to='tasks'
className='nav-link'
activeClassName='activated'>
Tasks
</NavLink>
</li>
</ul>
</nav>
);
}