Programmatic navigation with useNavigate

useNavigate changes the location from code, for moments when the app moves the user on its own, like after a login form or when a session times out.

All React Router examples React Router: usage and stats

Programmatic navigation with useNavigate: screenshot of the example below running — The code below, running in Chromium on our server (Oct 12, 2026). Press Run to see it live and change it.

How it works

Get the navigate function. LoginPage and Welcome both call useNavigate() and keep the returned navigate function. [1]
Navigate after a form submission. The form's submit handler calls navigate(`/welcome/${name}`), and the welcome page reads the name with useParams. [1]
Log out after a timer. Welcome counts down from 10 in a useEffect and calls navigate('/') when it reaches zero. The normal menu links still use Link. [1]

Run and edit it

It runs in your browser, in a sandboxed frame that cannot see this site; the packages load from esm.sh only after you press Run.

import { useEffect, useState } from 'react';
import { MemoryRouter, Routes, Route, Link, useNavigate, useParams } from 'react-router-dom';

const card = { width: 360, padding: 22, borderRadius: 14, background: '#fff', color: '#111', font: '15px system-ui' };
const button = { padding: '8px 16px', border: 0, borderRadius: 8, background: '#2563eb', color: '#fff', font: '600 14px system-ui', cursor: 'pointer' };

function LoginPage() {
  const navigate = useNavigate();
  const [name, setName] = useState('Ada');

  function handleSubmit(event) {
    event.preventDefault();
    // Move on once the form is submitted
    navigate(`/welcome/${encodeURIComponent(name || 'guest')}`);
  }

  return (
    <form onSubmit={handleSubmit} style={card}>
      <h2 style={{ margin: '0 0 12px' }}>Log in</h2>
      <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Your name"
        style={{ width: '100%', boxSizing: 'border-box', padding: 8, marginBottom: 12, borderRadius: 8, border: '1px solid #ccc' }} />
      <button type="submit" style={button}>Log in</button>
    </form>
  );
}

function Welcome() {
  const { name } = useParams();
  const navigate = useNavigate();
  const [seconds, setSeconds] = useState(10);

  useEffect(() => {
    if (seconds === 0) {
      navigate('/'); // timed logout
      return;
    }
    const timer = setTimeout(() => setSeconds(seconds - 1), 1000);
    return () => clearTimeout(timer);
  }, [seconds, navigate]);

  return (
    <div style={card}>
      <h2 style={{ margin: '0 0 8px' }}>Welcome, {name}!</h2>
      <p style={{ margin: '0 0 14px', color: '#6b7280' }}>Logging out in {seconds}s…</p>
      <button style={button} onClick={() => navigate('/')}>Log out</button>{' '}
      <Link to="/" style={{ marginLeft: 10 }}>Back (Link)</Link>
    </div>
  );
}

export default function App() {
  return (
    <div style={{ height: 360, background: '#111', display: 'grid', placeItems: 'center' }}>
      <MemoryRouter initialEntries={['/']}>
        <Routes>
          <Route path="/" element={<LoginPage />} />
          <Route path="welcome/:name" element={<Welcome />} />
        </Routes>
      </MemoryRouter>
    </div>
  );
}

Ctrl/⌘ + Enter runs

Press Log in to jump to the welcome page; wait 10 seconds or press Log out to return. Code written by AgentGid [1].

Checked Oct 12, 2026: it starts without errors in Chromium with react-router-dom 7.18.4, react 19.3.0, react-dom 19.3.0. Needs WebGL.

More React Router examples

Basic routing in React Router Nested routes with Outlet in React Router URL params with useParams in React Router Active links with NavLink in React Router

Sources

Docs: start › declarative › navigating

Explanations written by AgentGid from the official docs; the numbers in brackets point here. The code marked "written by AgentGid" is ours and free to copy.

Building something with React Router? Ask AgentGid →