Difference between {Link} and {useNavigate} from 'react-router-dom'

Question

Can anyone please explain the differences between {Link} and {useNavigate} from 'react-router-dom'? I am new to React and I see both {Link} and {useNavigate} are used to navigate through routes. So how are they different?

Answer 1

The difference between the Link (and NavLink and Navigate) components and the navigate function returned by the useNavigate hook is effectively the same difference between Declarative and Imperative programming.

Declarative vs Imperative Programming

Declarative programming is a paradigm describing WHAT the program does, without explicitly specifying its control flow. Imperative programming is a paradigm describing HOW the program should do something by explicitly specifying each instruction (or statement) step by step, which mutate the program's state.

• Imperative programming – focuses on how to execute, defines control flow as statements that change a program state.
• Declarative programming – focuses on what to execute, defines program logic, but not detailed control flow.

With the Link (and NavLink and Navigate) components you effectively declare, or defer, what you want to happen, and the component handles getting it done and executing it. These are declarative navigation actions.

Example declarative link:

<Link to="page">Page</Link>

It only specifies the target it wants to get to, but doesn't explain how to get there.

With the navigate function you are explicitly issuing a command to navigate now, immediately. This is an imperative action.

Example imperative link:

<Link onClick={() => navigate("page")}>Page</Link>

This version explicitly explains that if clicked on run this specific logic to navigate to this page.

Note also that Link is a React component and as such it must be rendered into the DOM as part of the return from a React component, whereas the navigate function is a function and can be used in callbacks.

Answer 2

Link is JSX element, it is replace <a>, so it can navigate between route when it clicked without refresh the page.

<Link to='/about'>To About Page</Link>

useNavigate is router hook. Same as Link but it can navigate between route programatically, like onSubmit, it will redirect to anoother page

  let navigate = useNavigate();

  async function handleSubmit(event) {
    event.preventDefault();
    await submitForm(event.target);
    navigate("/success", { replace: true });
  }

  return <form onSubmit={handleSubmit}>{/* ... */}</form>;

Answer 3

Link and NavLink are mostly same thing.We use both of them to route pages.But the difference is when we use NavLink we get some advantages like we can design our navigation with active state.Because the NavLink component provides a active class inside it.So we can design our navigation when it is active and we can keep track the active pages.

useNavigate is a hook which returns a function to navigate.But to do this we need to call a navigate function and it declares that how it will work.