Day-52 Today I Learned How to Use useNavigate in React Router

In React apps, we usually navigate between pages using the Link component. But sometimes, we need to change the page when a button is clicked or when something happens in the code — like after submitting a form. For that, React Router gives us a hook called useNavigate.

What is useNavigate

useNavigate is a hook from React Router that helps us move to another page using JavaScript code. It’s useful when we want to navigate based on some condition or after an action, instead of just clicking a Link.

My Example Setup

I made a small layout with three pages: Home, Blogs, and Contact. Instead of using Link tags, I used buttons and the useNavigate hook to move between them.

Step 1: Setting up React Router in index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

Step 2: Routes in App.js

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Layout from './Layout';
import Home from './Home';
import Blogs from './Blogs';
import Contact from './Contact';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route index element={<Home />} />
        <Route path="blogs" element={<Blogs />} />
        <Route path="contact" element={<Contact />} />
      </Route>
    </Routes>
  );
}

export default App;

Step 3: Navigation with useNavigate in Layout.js

import { useNavigate, Outlet } from 'react-router-dom';

function Layout() {
  const navigate = useNavigate();

  return (
    <div>
      <nav>
        <ul>
          <li><button onClick={() => navigate("/")}>Home</button></li>
          <li><button onClick={() => navigate("/blogs")}>Blogs</button></li>
          <li><button onClick={() => navigate("/contact")}>Contact</button></li>
        </ul>
      </nav>
      <Outlet />
    </div>
  );
}

export default Layout;

Step 4: The Page Files

Home.js

import React from 'react';

function Home() {
  return <h1>Home</h1>;
}

export default Home;

Blogs.js

import React from 'react';

function Blogs() {
  return <h1>Blogs</h1>;
}

export default Blogs;

Contact.js

import React from 'react';

function Contact() {
  return <h1>Contact</h1>;
}

export default Contact;