How to Navigate to Another Page in React

When you want to navigate between pages in your React application, the go-to choice is React Router.

If you are not building a single page application, you can use the <a> element or Window.location object to navigate to other pages.

Navigating Using React Router

You should use React Router when creating a single page application (SPA). Instead of loading a new HTML document when opening a page, a SPA changes the content of current page with JavaScript. Navigation to the new page happens without a page refresh and loss of state.

If you want to navigate between pages in your React single page app, you start by setting up React Router.

1. Install React Router

   npm install react-router-dom@6
   

2. Open src/index.js and BrowserRouter

   import * as React from 'react';
   import { StrictMode } from 'react';
   import { createRoot } from 'react-dom/client';
   import { BrowserRouter } from 'react-router-dom';
   
   import App from './App';
   
   const rootElement = document.getElementById('root');
   const root = createRoot(rootElement);
   
   root.render(
     <StrictMode>
       <BrowserRouter>
         <App />
       </BrowserRouter>
     </StrictMode>
   );
   

3. Register all your routes in App.js

   import * as React from 'react';
   import { Routes, Route } from 'react-router-dom';
   
   import Home from './pages/Home';
   import About from './pages/About';
   
   export default function App() {
     return (
       <div className="App">
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="about" element={<About />} />
         </Routes>
       </div>
     );
   }
   

   Every route must correspond to a React component that represents that page.

4. Navigate using Link component

   import * as React from 'react';
   import { Link } from 'react-router-dom';
   
   export default function Home() {
     return (
       <>
         <h1>Home page</h1>
         <Link to="/about">About</Link>
       </>
     );
   }
   

Navigating Programatically With React Router

Use the useNavigate hook from React Router to navigate programmatically from one page to another. By default, the browser history will contain both current and target page.

If you want to rewrite current page in history with the target page, use replace: true. Otherwise, leave out the config object or set replace: false.

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

const navigate = useNavigate();

navigate('/about', { replace: true });

The useNavigate hook returns a function that you can use to redirect user to any internal page. Here’s a post about redirecting to external links.

Navigating From Button onClick Event

This is how to navigate to a different page on a button click.

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

export default function Form() {
  const navigate = useNavigate();

  function handleClick(event) {

    navigate('/target-route');
  }

  return <button type="button" onSubmit={handleClick}>Click</button>
}

Navigating From Form onSubmit Event

Here’s how to navigate to another page when you submit a form.

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

export default function Form() {
  const navigate = useNavigate();

  function handleSubmit(event) {
    event.preventDefault();

    navigate('/target-route');
  }

  return (
    <>
      <form onSubmit={handleSubmit}>
        <button type="submit">Submit</button>
      </form>
    </>
  );
}

Using Navigate Component

You can also use the Navigate component provided by React Router to load another page.

For example, you can use it redirect users to a login page if they are not authenticated.

import * as React from 'react';
import { Navigate } from 'react-router-dom';

export default function Private() {
  const loggedIn = false; // Replace with auth check logic

  return <>{loggedIn ? <h1>Private page</h1> : <Navigate to="/login" />}</>;
}

Navigating Without React Router

If you are not building a single page app, just use the <a> element for navigating to other pages.

import * as React from 'react';

export default function Home() {

  return (
    <>
      <h1>Home page</h1>
      <a href="/about">About</a>
    </>
  );
}

To navigate to other pages programmatically outside of single page applications, use the Window interface.

You can either navigate on a button click like this:

import * as React from 'react';

export default function Profile() {
  const navigate = useNavigate();

  function handleClick() {
    window.location.href = '/login';
  }

  return (
    <>
      <h1>Profile page</h1>
      <button onClick={handleClick}>Log Out</button>
    </>
  );
}

Or navigate to another page during the render like this:

import * as React from 'react';

export default function Private() {
  const loggedIn = false; // Replace with auth check logic

  return (
    <>{loggedIn ? <h1>Private page</h1> : window.location.assign('about')}</>
  );
}