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

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
to="page"
onClick={(e) => {
e.preventDefault();
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.

Answer 4

Let's say you have some needs to render the some page after checking something (e.g. you have criteria to check whether user have login before or not, so first you check the session of webpage if session is valid or present then then you redirect to user main page otherwise you told that user is log out.) that's time Link and useNavigate use cases shining very much.
code for above thing--->
index.js
root.render(
<BrowserRouter>
<App/>
</BrowserRouter>
);
App.js
const navigate=useNavigate() //remember useNavigate only valid inside
useEffect(()=>{ // BrowserRouter that's why I wrap App.js
// by BrowserRouter in index.js
const key=localStorage.getItem('key');
console.log(key);
if(key===undefined){
navigate('/')
}else{
navigate('/list')
}
},[1])
return <Routes>
<Route path="/" element={<Authentication/>}/>
<Route path="/list" element={<List/>}/>
</Routes>
If I use Link despite of useNavigate then Browser will not complain
but it's not working under the hood. Because Link is only valid till if you include inside webpage(DOM) like anchor or a tag inside html page because Link is same as a tag. But useNavigate is a function or hook what's use anywhere in your code. Because useNavigate not need to add inside DOM.