Navigation in React Router

Overview

This article will provide readers with an overview of how to implement navigation in a React application using the React Router library. We'll explore building route components, creating links, and managing navigation flows in your React application. The post will include real-world examples, key concepts of React Router, and how to harness the power of this library to create the best navigation experience for your React application

Link

A <Link> is an element that lets the user navigate to another page by clicking or tapping on it.

Ref

import { Link } from 'react-router-dom'

function UsersIndexPage({ users }) {
  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            <Link to={user.id}>{user.name}</Link>
          </li>
        ))}
      </ul>
    </div>
  )
}

options

replace
state: object
preventScrollReset: boolean
ScrollRestoration

useNavigate hooks

React Router v6 ships with a useNavigate hook, which returns us a function that we can call to navigate around our apps with. These actions are typically done after some data processing or an event callback, a simple example looks like so:

useNavigate(string)

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

const Home = () => {
  const navigate = useNavigate();

  const goToProducts = () => navigate('/products');

  return (
    <div>
      Home
      <button onClick={goToProducts}>Go to Products</button>
    </div>
  );
};

useNavigate(object and search params)

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

const Home = () => {
  const navigate = useNavigate();

  const goToProducts = () => {
    return navigate({
      pathname: `/products`,
      search: '?search=iphone&color=gray&sort=price',
    })
  }

  return (
    <div>
      Home
      <button onClick={goToProducts}>Go to Products</button>
    </div>
  );
};

useNavigate(object, search params and createSearchParams)

createSearchParams transforms an object into a string for you to then set via the useNavigate hook in React Router Here I’ve created a params object with some values to demonstrate:

import { useNavigate, createSearchParams } from 'react-router-dom'

const Home = () => {
  const navigate = useNavigate();
  const params = {
    search: 'iphone',
    color: 'gray',
    sort: 'price',
  }

  const goToProducts = () => {
    return navigate({
      pathname: `/products`,
      search: `?${createSearchParams(params)}`,
    })
  }

  return (
    <div>
      Home
      <button onClick={goToProducts}>Go to Products</button>
    </div>
  );
};

useNavigate(Create a Custom Hook)

import { useNavigate, createSearchParams } from 'react-router-dom'

const useNavigateSearch = () => {
  const navigate = useNavigate();
  return (pathname, params) =>
    navigate({ pathname, search: `?${createSearchParams(params)}` });
};

const Home = () => {
  const navigateSearch = useNavigateSearch();

  const goToProducts = () =>
    navigateSearch('/posts', { search: 'iphone', color: 'gray', sort: 'price' });

  return (
    <div>
      <p>Home</p>
      <button onClick={goToProducts}>Go to Products</button>
    </div>
  );
};

Remember to include the ? at the beginning of the string, because the whole string is appended to the URL

NavLink

const Home = () => {

  return (
    <div className="nav">
      <NavLink
        to="products"
        className={({ isActive }) => (isActive ? 'active' : 'inactive')}
      >
        Products
      </NavLink>
    </div>
  )
}