React Router

Common errors

• Error: No routes matched URL "/"

  cause The current URL path does not match any defined route in your router configuration.
  fix Verify your `createBrowserRouter` configuration to ensure that a route exists for the URL that is being accessed. Include `index: true` for default child routes or add a catch-all route.

• Error: You should not use `<Link>` outside a `Router`.

  cause Routing components or hooks (e.g., `Link`, `useNavigate`) are being used in a component that is not rendered within a `RouterProvider` or `BrowserRouter` context.
  fix Wrap your root application component (or the specific components that use routing elements) with `<RouterProvider router={router} />` or `<BrowserRouter>` to provide the necessary routing context.

• Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

  cause React Router hooks (e.g., `useNavigate`, `useParams`, `useLocation`) are being called outside the scope of a React function component or custom hook.
  fix Ensure that all React Router hooks are called directly within the body of a React function component or a custom hook that itself follows React's rules of hooks.

• TypeError: Cannot read properties of undefined (reading 'Provider')

  cause This error often occurs when `RouterProvider` is not correctly imported, or there's an incompatibility with React versions.
  fix Verify `import { RouterProvider } from 'react-router'` is correct and that your `react` and `react-dom` packages are both at version 18 or higher.

• ReferenceError: require is not defined

  cause Attempting to use CommonJS `require()` syntax for imports in a modern JavaScript or TypeScript project configured for ESM (ES Modules).
  fix Replace `const RouterProvider = require('react-router').RouterProvider;` with `import { RouterProvider } from 'react-router';`.

Warnings

• breaking React Router v7 introduced significant changes, primarily with the data APIs (loaders, actions) and the recommended `createBrowserRouter` and `RouterProvider` setup.
  Fix: Review the official migration guide for moving from v6 to v7. Refactor routing configuration to use `createBrowserRouter` and adopt data APIs as needed.
• gotcha React Router v7 requires React and React DOM v18 or newer as peer dependencies.
  Fix: Ensure your project's `react` and `react-dom` packages are updated to version 18 or higher.
• gotcha The `react-router` package is the core, but for browser-based applications, you typically install and use `react-router-dom` which exports browser-specific components like `BrowserRouter`.
  Fix: For web applications, prefer `npm i react-router-dom` and import `BrowserRouter` or `createBrowserRouter` from `react-router-dom`. The `react-router` package primarily exports hooks and data APIs shared across platforms.
• gotcha The package specifies a Node.js engine requirement.
  Fix: Ensure your Node.js environment meets the minimum requirement of version 20.0.0 or higher.

Install

• npm install react-router npm
• yarn add react-router yarn
• pnpm add react-router pnpm

Imports

• RouterProvider

  import { RouterProvider } from 'react-router'

Quickstart

This quickstart demonstrates how to set up a basic data router with `createBrowserRouter` and `RouterProvider`, defining nested routes and using `Link` for declarative navigation and `useNavigate` for programmatic navigation within a React application.

import React from 'react';
import ReactDOM from 'react-dom/client';
import {
  createBrowserRouter,
  RouterProvider,
  Outlet,
  Link,
  useNavigate
} from 'react-router';

function Layout() {
  const navigate = useNavigate();
  return (
    <div>
      <h1>React Router Example</h1>
      <nav>
        <Link to="/">Home</Link> | <Link to="/about">About</Link>
      </nav>
      <hr />
      <Outlet /> {/* Renders the current route's element */}
      <button onClick={() => navigate('/contact')}>Go to Contact</button>
    </div>
  );
}

function HomePage() {
  return <h2>Welcome to the Home Page!</h2>;
}

function AboutPage() {
  return <h2>Learn more about us!</h2>;
}

function ContactPage() {
  return <h2>Get in touch!</h2>;
}

const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    children: [
      {
        index: true,
        element: <HomePage />,
      },
      {
        path: 'about',
        element: <AboutPage />,
      },
      {
        path: 'contact',
        element: <ContactPage />,
      },
    ],
  },
]);

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);