React Router – Links & NavLink | React Tutorial

📌 What are Router Links?

What are Links in React Router?

React Router provides Link and NavLink components to navigate between pages without refreshing the browser. They render as <a> tags in the DOM.

📌 Using <Link> in React Router

The Link component is used for client-side navigation. Unlike <a> tags, it prevents page reloads and ensures smooth navigation in a Single Page Application (SPA).

React Playground

import React from 'react';
import { Route, Routes } from 'react-router-dom';
import Home from './Home.jsx';
import About from './About.jsx';
import Contact from './Contact.jsx';
import Navbar from './Navbar.jsx';

const App = () => {
  return (
    <>
      <Navbar/>
      <Routes>
        <Route path='/' element={<Home/>}/>
        <Route path='/about' element={<About/>}/>
        <Route path='/contact' element={<Contact/>}/>
      </Routes>
    </>
  )
}

export default App;

Open Sandbox

✨ Using <NavLink> for Active Links

The NavLink component is an enhanced version of Link. It adds an "active" class or allows inline style changes for the active route.

Useful for highlighting the current page in a navigation menu.

React Playground

import React from 'react';
import { Route, Routes } from 'react-router-dom';
import Home from './Home.jsx';
import About from './About.jsx';
import Contact from './Contact.jsx';
import Navbar from './Navbar.jsx';

const App = () => {
  return (
    <>
      <Navbar/>
      <Routes>
        <Route path='/' element={<Home/>}/>
        <Route path='/about' element={<About/>}/>
        <Route path='/contact' element={<Contact/>}/>
      </Routes>
    </>
  )
}

export default App;

Open Sandbox

react

Nearby lessons