How to Add React Router to a Vite Project

To add React Router to a Vite project, install the react-router package and mount a BrowserRouter. The setup has three parts: install react-router, mount a BrowserRouter, and declare routes. This guide walks through the whole path on a fresh Vite app.

Scaffold and install

Scaffold the app first. Vite asks for a project name, a framework, and a language variant, so choose React and JavaScript when prompted. Vite requires Node.js 20.19 or newer in the 20.x line, or 22.12 or newer in the 22.x line.

bash

npm create vite@latest my-router-app -- --template react
cd my-router-app
npm install react-router

The first command creates the project with the React template, which skips the prompts. The second command installs react-router, the single package that now contains every React Router export.

Mount BrowserRouter

Open main.jsx and wrap App in a BrowserRouter. This one change makes the router available to the whole tree, so any component can read the URL or trigger navigation.

App.jsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router";
import App from "./App.jsx";
createRoot(document.getElementById("root")).render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>
);

BrowserRouter keeps the URL bar in sync with what your components render. Mount it only once in main.jsx, not inside App or any page component.

Declare routes

Replace the default App.jsx content with two small pages and a Routes block. The page components are plain React functions, and each Route maps a path to one of them.

App.jsx

function Home() {
  return <h1>Home</h1>;
}
 
function About() {
  return <h1>About</h1>;
}

With the pages defined, render them through Routes. The first Route matches the root path, and the second matches /about.

App.jsx

import { Routes, Route } from "react-router";
 
export default function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  );
}

Routes and Route are the core of a React Router app. A fuller explanation of paths, links, and layouts is in the React Router tutorial.

Add links

Users need a way to move between pages. Add a Link for each route so clicks update the URL without a full page reload.

App.jsx

import { Link } from "react-router";
 
export default function Nav() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

Render Nav above Routes in App.jsx, or keep it in a shared layout. Clicking Home or About now swaps the visible page and updates the address bar.

Run the dev server

Start Vite and open the printed local URL, usually http://localhost:5173.

bash

npm run dev

Visit /about directly or click the About link. The page should change without a network request for a new document. Opening a path with no route renders nothing, which is the cue to add a catch-all route, covered in how to build a 404 page with React Router.

Troubleshooting

• A "Cannot find module react-router" error means the package was not installed. Run npm install react-router from the project folder.
• A blank page on every path usually means the app is missing BrowserRouter. Check main.jsx.
• Imports from react-router-dom are outdated. Import from react-router instead.
• A path that renders nothing has no matching Route. Add the missing route or a catch-all.