In React, Link and useNavigate serve different purposes when it comes to navigating between pages or components within a React application.
Link:
Link is typically used in conjunction with React Router, a popular library for routing in React applications. It provides a declarative way to create links that navigate to different routes within the application without triggering a full page reload. Link is a component that renders an tag with the specified destination route.
Example:
`> import { Link } from 'react-router-dom';
> function Navigation() {
> return (
> <nav>
> <ul>
> <li>
> <Link to="/">Home</Link>
> </li>
> <li>
> <Link to="/about">About</Link>
> </li>
> <li>
> <Link to="/contact">Contact</Link>
> </li>
> </ul>
> </nav>
> );
> }
`
useNavigate:
useNavigate is a hook provided by React Router that enables programmatic navigation within functional components. It returns a navigate function that can be used to navigate to different routes programmatically, similar to how you might use history.push or history.replace with class-based components.
Example:
`> import { useNavigate } from 'react-router-dom';
> function SomeComponent() {
> const navigate = useNavigate();
> function handleClick() {
> // Navigate to the '/about' route
> navigate('/about');
> }
> return (
> <button onClick={handleClick}>Go to About</button>
> );
> }`
In summary, Link is used for creating links for user navigation within the application, while useNavigate is used for programmatic navigation within functional components. Both are commonly used with React Router for managing client-side routing in React applications.
Top comments (0)