Routes and Links
Once you've set up your routes with React Router, you need a way for users to navigate between them. That's where the `Link` and `NavLink` components come in. They replace traditional `` tags and ensure navigation happens without a full page reload.
`Link` is a component that renders an `` element but intercepts clicks to prevent full page reload. It uses the `to` prop to specify the destination path.
import { Link } from 'react-router-dom';
function Navbar() { return ( <nav> <Link to="/">Home</Link> <Link to="/about">About</Link> <Link to="/contact">Contact</Link> </nav> );}import { NavLink } from 'react-router-dom';
function Navbar() { return ( <nav> <NavLink to="/" style={({ isActive }) => ({ fontWeight: isActive ? 'bold' : 'normal', color: isActive ? 'red' : 'blue' })} > Home </NavLink> <NavLink to="/about" className={({ isActive }) => isActive ? 'active' : ''}> About </NavLink> </nav> );}import { useNavigate } from 'react-router-dom';
function LoginForm() { const navigate = useNavigate();
const handleSubmit = (e) => { e.preventDefault(); <!-- after login logic --> navigate('/dashboard'); <!-- redirect --> };
return <!-- form -->;}Need more clarification?
Drop us an email at career@quipoinfotech.com