Create a Basic Router using React Router 6

Last updated by Noel Varanda, Fri Jul 21 2023

React

React Router

Routing

Layouts

Nested routes

On this page, you'll learn how to setup a basic React router using react-router.

Preview

Below is a preview of the output of the code. Have a look at all the code here (opens in a new tab).

The code

Create a basic router

Start off using createBrowserRouter to create a router. It's the recommended router (opens in a new tab) for all React Router web projects.

It uses the DOM History API to update the URL and manage the history stack.
It also enables the v6.4 data APIs like loaders (opens in a new tab), actions (opens in a new tab), fetchers (opens in a new tab) and more.

import {
  Route,
  RouterProvider,
  createBrowserRouter,
  createRoutesFromElements,
} from 'react-router-dom';
import * as React from 'react';
 
const Home = () => <h1>Home</h1>;
const Settings = () => <h1>Settings</h1>;
 
const routes = createRoutesFromElements(
  <Route>
    <Route index element={<Home />} />
    <Route path="settings" element={<Settings />} />
  </Route>
);
 
const router = createBrowserRouter(routes);
 
const App = () => <RouterProvider router={router} />;
 
export default App;

The index parameter determines the default component to be rendered when the parent route is matched. This can be useful when you want to display a default component for a specific route. Here's an example:

// ...
const routes = createRoutesFromElements(
  <Route>
    <Route index element={<Home />} />
    <Route path="settings" element={<Settings />} />
  </Route>
);
// ...

Add a layout

The <Outlet /> (opens in a new tab) component allows you to define nested layouts, where specific components are rendered based on the route hierarchy. This can be helpful when you have complex layouts with multiple nested components.

import {
  Route,
  Outlet,
  RouterProvider,
  createBrowserRouter,
  createRoutesFromElements,
} from 'react-router-dom';
import * as React from 'react';
 
const Home = () => <h1>Home</h1>;
const Settings = () => <h1>Settings</h1>;
 
const DashboardLayout = () => (
  <div>
    <h1>User Dashboard</h1>
    <main>
      <Outlet />
    </main>
  </div>
);
 
const routes = createRoutesFromElements(
  <Route element={<DashboardLayout />}>
    <Route index element={<Home />} />
    <Route path="settings" element={<Settings />} />
  </Route>
);
 
const router = createBrowserRouter(routes);
 
const App = () => <RouterProvider router={router} />;
 
export default App;

Add navigation

Use the <Link> (opens in a new tab) component to create a <Nav />:

src/router/components/Nav.tsx

export const Nav = () => (
  <nav>
    <ul>
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/settings">Settings</Link>
      </li>
    </ul>
  </nav>
);

Now add that to your Layout:

import {
  Route,
  Outlet,
  RouterProvider,
  createBrowserRouter,
  createRoutesFromElements,
} from 'react-router-dom';
import * as React from 'react';
import { Nav } from '@/router/components/Nav';
 
const Home = () => <h1>Home</h1>;
const Settings = () => <h1>Settings</h1>;
 
const DashboardLayout = () => (
  <div>
    <h1>User Dashboard</h1>
    <Nav />
    <main>
      <Outlet />
    </main>
  </div>
);
 
const routes = createRoutesFromElements(
  <Route element={<DashboardLayout />}>
    <Route index element={<Home />} />
    <Route path="settings" element={<Settings />} />
  </Route>
);
 
const router = createBrowserRouter(routes);
 
const App = () => <RouterProvider router={router} />;
 
export default App;

Add a route with params

import {
  Route,
  Outlet,
  Link,
  RouterProvider,
  createBrowserRouter,
  createRoutesFromElements,
  useParams,
} from 'react-router-dom';
import * as React from 'react';
 
const Home = () => <h1>Home</h1>;
const Settings = () => <h1>Settings</h1>;
const RouteWithParams = () => {
  const { id } = useParams();
  return <h1>Dynamic route. Id: {id}</h1>;
};
 
const Nav = () => (
  <nav>
    <ul>
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/settings">Settings</Link>
      </li>
      <li>
        <Link to="/route-with-params/3">Route With Params</Link>
      </li>
    </ul>
  </nav>
);
 
const DashboardLayout = () => (
  <div>
    <h1>User Dashboard</h1>
    <Nav />
    <main>
      <Outlet />
    </main>
  </div>
);
 
const routes = createRoutesFromElements(
  <Route element={<DashboardLayout />}>
    <Route index element={<Home />} />
    <Route path="settings" element={<Settings />} />
    <Route path="route-with-params">
      <Route path=":id" element={<RouteWithParams />} />
    </Route>
  </Route>
);
 
const router = createBrowserRouter(routes);
 
const App = () => <RouterProvider router={router} />;
 
export default App;

Keep up to date with any latest changes or announcements by subscribing to the newsletter below.