Programmatic navigation

Learn to change pages from code with useNavigate.

Programmatic navigation

Sometimes you need to navigate to another page programmatically, after a button click or form submit. Instead of Link you use the useNavigate hook.

const navigate = useNavigate(); gives you a function. navigate('/home') goes to the new path; navigate(-1) goes back one step.

Common uses: redirect after form submit, go to login page after logout, or redirect with a timer.

Using useNavigate

useNavigate returns a function. The first argument can be a path string or a number. The second argument is options: { replace: true } replaces the current history entry instead of pushing a new one.

Example: a logout button using replace: true stops the user from going back to the protected page. With state you can carry data to the next page: navigate('/login', { state: { from: '/panel' } }).

Read this data in the target page via useLocation().state.

Exercise Logout button

Complete the skeleton below. Write a LogoutButton component; get navigate with useNavigate and return <button onClick={() => navigate('/login', { replace: true })}>Logout</button>. Export it.

Show example solution

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

function LogoutButton() {
  const navigate = useNavigate();
  return <button onClick={() => navigate("/login", { replace: true })}>Logout</button>;
}

export default LogoutButton;

Test yourself

What does navigate(-1) do?
- Ana sayfaya gider
- Resets the route
- Reloads the page
- Goes back one step
Show answer

Goes back one step — navigate(-1) goes back one step in history.

navigate call

const navigate = ____;

Show answer

const navigate = useNavigate();

Programmatic navigation: match the terms

useNavigate

Returns a function
navigate('/x')

Goes to a path
navigate(-1)

Goes back
{ replace: true }

Replaces the entry

Next lesson: Summary - Advanced router

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies