Adding React Router 6

In this tutorial, we'll explore the process of adding React Router 6 to a React 18 application using Vite. We'll create a simple application with a few routes and configure Vite to make it all work together seamlessly.

First, we need to create a new React project using Vite.

npx create-vite my-react-router-app --template react
cd my-react-router-app
npm install

Now that we've set up our project, let's add React Router 6 to it.

npm install react-router-dom

With React Router 6 installed, let's create a simple application with a few routes to demonstrate its usage.

src/Home.jsx

export default function Home() {
  return (
    <div>
      <h1>Home</h1>
      <p>Welcome to our home page!</p>
    </div>
  )
}

src/About.jsx

export default function About() {
  return (
    <div>
      <h1>About</h1>
      <p>Learn more about us!</p>
    </div>
  )
}

src/Contact.jsx

export default function Contact() {
  return (
    <div>
      <h1>Contact</h1>
      <p>Get in touch with us!</p>
    </div>
  )
}

Now that we have our components, let's create routes for them using React Router 6.

src/App.jsx

import { BrowserRouter, Link, Route, Routes } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>

      <main>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </main>
    </BrowserRouter>
  );
}

export default App;

I'll explain the code above in more detail below, but first, let's run our application and see React Router 6 in action.

npm run dev

Open your browser and navigate to http://localhost:5173. You should see the home page of our application with the navigation links at the top. Clicking on these links will navigate you to the corresponding pages, demonstrating React Router 6 functionality.

Let's go through the App.jsx code snippet step by step to explain how it works.

import { BrowserRouter, Link, Route, Routes } from 'react-router-dom';
import { HomePage } from './pages/HomePage';
import { AboutPage } from './pages/AboutPage';
import { ContactPage } from './pages/ContactPage';

In the beginning, we import the necessary React and React Router components. We also import the HomePage, AboutPage, and ContactPage components from their respective files.

function App() {
  return (
    <BrowserRouter>

We define the App component, which will serve as the root component of our application. Inside the App component, we use the BrowserRouter component, which is responsible for handling the routing and history manipulation for our app.

      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>

We create a simple navigation menu using the nav and ul HTML elements. Within the menu, we use the Link component from React Router to create links for our routes. The to prop in each Link component specifies the destination URL for the link.

      <main>
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/about" element={<AboutPage />} />
          <Route path="/contact" element={<ContactPage />} />
        </Routes>
      </main>

We use the Routes component to define our application's routes. Inside the Routes component, we add a Route component for each of our pages. The path prop specifies the URL path for the route, while the element prop defines the component to render when the route is active.

    </BrowserRouter>
  );
}

export default App;

Finally, we close the BrowserRouter component and export the App component as the default export of the module.

This App.jsx file sets up a basic React app with three routes (home, about, and contact) and a navigation menu. When users click on the navigation links, the corresponding route will be activated, and the associated component will be rendered within the main element.

In this tutorial, we've successfully added React Router 6 to a React 18 application using Vite. We created a simple application with a few routes, set up navigation links, and demonstrated how React Router 6 handles navigation between pages.

If you have any questions or comments, feel free to leave them below. Happy coding!