Difference between Link and Navigate Component in React Router - Coding

In this article, we’ll delve into the intricacies of two fundamental components within the widely acclaimed React Router Dom Library a Link and Navigate. As the backbone of many react applications, these components play pivotal roles in facilitating seamless navigation and routing.

We’ll explore their respective functionalities, and use cases and most importantly, dissect the key differences between them. By the end of this article, you’ll have a comprehensive understanding of how to leverage Link and Navigate effectively in your React Router Dom-powered project.

Table of Content

Link Component
Navigate Component
Difference between Link and Navigate
Conclusion

Link Component:

The Link component in React Router is used to create clickable links that allow users to navigate between different routes within the application. It renders an anchor (<a>) element in DOM and handles the navigation internally using client-client rendering without causing a full page reload.

Key Features of Link:

Usage:

The primary purpose of Link is to create navigation links within the UI of components.

Props:

The to prop is required and specifies the destination router or URL that the link should navigate to. Additional prop replace can be used to control navigation behavior.

JavaScript

import { Link } from "react-router-dom";
import "./navbar.css";

const Navbar = () => {
  return (
    <nav className="navbar">
      <div>
        <Link to="">Logo</Link>
      </div>
      <div>
        <ul>
          <li>
            <Link to="">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </div>
    </nav>
  );
};
export default Navbar;

Output:

If When user Click on Home, About, Contact then he will navigate to that Page.

Link-ezgifcom-crop

Navigate Component:

The Navigate Component in react router is used for programmatic navigation within the application. It allows developer to trigger navigation imperatively based on certain conditions or events, rather than user interaction like clicks.

Key Features of navigate:

Usage:

Navigate is used to trigger navigation based on programmatic logic within application.

Props:

Similar to Link, the to prop is required and specifies the destination router or URL that the link should navigate to. Additional prop replace can be used to control navigation behavior.

JavaScript

// index.js file 

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import { getAuth, onAuthStateChanged } from "firebase/auth";
import app from "./firbaseConfig";

import App from "./App";

const auth = getAuth(app);

const isAuthenticated = () => {
  return new Promise((resolve, reject) => {
    onAuthStateChanged(
      auth,
      (user) => {
        if (user) {
          // User is logged in
          resolve(true);
          console.log(user);
        } else {
          // User is not logged in
          resolve(false);
          console.log(user);
        }
      },
      (error) => {
        // An error occurred while checking authentication state
        reject(error);
      }
    );
  });
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App isAuthenticated={isAuthenticated} />
  </React.StrictMode>
);

JavaScript

//app.jsx file

import Navbar from "./components/Navbar/Navbar";
import "./App.css";
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
import Home from "./pages/Home";
import Login from "./pages/Login";
import Signup from "./pages/Signup";
import Dashboard from "./pages/Dashboard";

const App = ({ isAuthenticated }) => {
  return (
    <BrowserRouter>
      <div className="app">
        <Navbar />
        <Routes>
          <Route path="" element={<Home />} exact />
          <Route path="/login" element={<Login />} />
          <Route path="/signup" element={<Signup />} />
          <Route
            path="/dashboard"
            element={
              isAuthenticated ? <Dashboard /> : <Navigate to={"/login"} />
            }
          />
        </Routes>
      </div>
    </BrowserRouter>
  );
};

export default App;

Output:

If user is Logged in then Dashboard Page automatically render otherwise user will navigate to login page.

Navigate Component

Difference between Link and Navigate:

Feature	Link	Navigate
Purpose	Create a clickable navigation links within the application	Triggers programmatic navigation based on logic or conditions
Usage	Used to navigate between routes based on user interactions(e.g: clicks).	Used to navigate based on programmatic logic or conditions not necessarily tied to user interactions.
Component type	Component that renders an anchor (<a>) element	Components used within functions or event handlers
Props	Requires the to prop to specify the destination route or URL. Additional replace prop can control the behavior of navigation	Requires the to prop to specify the destination route or URL. Similar additional replace prop can control the behavior of navigation
Example	<Link to=”/about”>About</Link>	<Navigate to=”/login”/>

Conclusion:

While both Link and navigate components facilitate navigation within React application, they cater to different use cases. Link is ideal for creating clickable navigation links within the UI, whereas Navigate is useful for triggering navigation based on programmatic logic or conditions. Understanding the distinction between these components is crucial for building efficient and user-friendly navigation systems in React-Router based applications. By leveraging Link and Navigate appropriately, developers can create seamless navigation experience for users while maintaining control over the application’s routing behavior.

Reffered: https://www.geeksforgeeks.org

ReactJS

Related
BrowserRouter in React
Getting Started with Next JS
CSS Viewer Cube in React without Three.js
Implementing Pagination and Infinite Scrolling with React Hooks
Real-time Updates with WebSockets and React Hooks

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	14