React - Router Lab

Set Up Vite

First, let's set up our Vite project.

npm create vite@latest react-router-project

• Choose React as the framework.
• Choose JavaScript as the variant.
• Choose ESLint as the linter.
• Choose Yes to install dependencies and start the server.
• Check whether the website works correctly.
• Stop the server and navigate to the project directory.

Install React Router

Install the react-router package.

npm install react-router

Create the Pages

Create the src/pages/ directory and add three components: Home.jsx, About.jsx, and Projects.jsx.

From now on, keep the development server running and check the website and console as you follow the steps.

Import the pages into main.jsx:

import Home from "./pages/Home.jsx";
import About from "./pages/About.jsx";
import Projects from "./pages/Projects.jsx";

Configure the Router

Define a router object using createBrowserRouter(). Import the function from react-router.

import { createBrowserRouter } from "react-router";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
  },
  {
    path: "/about",
    element: <About />,
  },
  {
    path: "/projects",
    element: <Projects />,
  },
]);

• path → The URL path.
• element → The component rendered for that path.

Here, we defined a set of URL rules:

[
  URL rule,
  URL rule,
  URL rule
]

For example, navigating to /about renders the <About /> component.

Connect the Router

Replace the <App /> component with <RouterProvider router={router} />.

Import RouterProvider from react-router:

import { createBrowserRouter, RouterProvider } from "react-router";
// ...
createRoot(document.getElementById("root")).render(
  <StrictMode>
    <RouterProvider router={router} />
  </StrictMode>,
);

This connects our router configuration to the React application.

Test it by visiting:

• http://localhost:5173/
• http://localhost:5173/about
• http://localhost:5173/projects

At this point, React Router should be working. However, users don't usually navigate websites by manually typing URLs. Let's add some <Link /> components.

Add Navigation Links

Open the Home component and replace its contents with the following code:

import { Link } from "react-router";

function Home() {
  return (
    <div>
      <h1>Home Page</h1>

      <Link to="/about">About</Link>
      <Link to="/projects">Projects</Link>
    </div>
  );
}

export default Home;

• First, we imported the <Link /> component from react-router.
• Then, we added <Link to="...">...</Link> elements, similar to HTML <a> tags.

Check the home page. That's it—it was simple!

Our application is still an SPA (Single-Page Application), but navigation is now handled by React Router.

Let's go further and learn about <Outlet />.

Create a Shared Layout

Create a src/components/ directory, then add a Layout.jsx component inside it:

import { Link, Outlet } from "react-router";

function Layout() {
  return (
    <>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/projects">Projects</Link>
      </nav>

      <main>
        <Outlet />
      </main>

      <footer>My Website</footer>
    </>
  );
}

export default Layout;

Add Nested Routes

Update the router object in main.jsx:

import Layout from "./components/Layout.jsx";
// ...
const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        index: true,
        element: <Home />,
      },
      {
        path: "about",
        element: <About />,
      },
      {
        path: "projects",
        element: <Projects />,
      },
    ],
  },
]);

• We introduced something new here: children.
• Child routes determine what gets rendered inside <Outlet />.
• This represents the changing part of the website.
• The Layout component acts as a shared layout for all child routes.
• When we visit /, the route with index: true renders the <Home /> component.

Great! Now the shared layout stays in place while the content inside <Outlet /> changes based on the current route.