--- type: article title: "Adding React Router 6" slug: react-router-6 description: "In this tutorial, we'll explore the process of adding React Router 6 to a React 18 application using Vite" image: name: "react.js.png" width: 1280 height: 720 status: "published" date: "2023-03-18T22:43:07.381Z" tags: ["React Router", "React", "JavaScript", "Frontend", 'react-router-dom', 'react js'] previousPostSlug: 'useeffect-everything-you-need-to-know' nextPostSlug: 'use-context-auth' --- 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. ## Project Setup First, we need to create a new React project using Vite. Create a new Vite project using the React template. {/* prettier-ignore */} ``` npx create-vite my-react-router-app --template react cd my-react-router-app npm install ``` ``` yarn create vite my-react-router-app --template react cd my-react-router-app yarn ``` Now that we've set up our project, let's add React Router 6 to it. ## Adding React Router 6 Install React Router 6 as a dependency. {/* prettier-ignore */} ``` npm install react-router-dom ``` ``` yarn add react-router-dom ``` With React Router 6 installed, let's create a simple application with a few routes to demonstrate its usage. ## Creating Components and Routes Create three new components: `Home.jsx`, `About.jsx`, and `Contact.jsx` in the `src` folder. **src/Home.jsx** ```javascript export default function Home() { return (

Home

Welcome to our home page!

) } ``` **src/About.jsx** ```javascript export default function About() { return (

About

Learn more about us!

) } ``` **src/Contact.jsx** ```javascript export default function Contact() { return (

Contact

Get in touch with us!

) } ``` Now that we have our components, let's create routes for them using React Router 6. Modify `src/App.jsx` to include the new routes. **src/App.jsx** ```javascript import { BrowserRouter, Link, Route, Routes } from 'react-router-dom'; import Home from './Home'; import About from './About'; import Contact from './Contact'; function App() { return (
} /> } /> } />
); } 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. ## Running the Application Start the development server. {/* prettier-ignore */} ``` npm run dev ``` ``` yarn 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. ## Explaining `App.jsx` Let's go through the `App.jsx` code snippet step by step to explain how it works. ```jsx 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. ```jsx function App() { return ( ``` 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. ```jsx ``` 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. ```jsx
} /> } /> } />
``` 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. ```jsx
); } 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. ## Summary 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!