--- title: Bitovi Academy - Routing in React description: Learn how to set up and use React Router to update the application's user interface in response to URL changes. --- - ![AI implementation](https://www.bitovi.com/hubfs/AIConsultingIcon.svg) [AI implementation](https://www.bitovi.com/services/ai-consulting?hsLang=en-us) - ![Systems engineering](https://www.bitovi.com/hubfs/icon%20-%20backend.svg) [Systems engineering](https://www.bitovi.com/services/systems-engineering-consulting?hsLang=en-us) - ![Project management](https://www.bitovi.com/hubfs/icon%20-%20PM.svg) [Project management](https://www.bitovi.com/services/agile-project-management-consulting?hsLang=en-us) - ![Product design](https://www.bitovi.com/hubfs/icon%20-%20design.svg) [Product design](https://www.bitovi.com/services/product-design-consulting?hsLang=en-us) - ![Frontend development](https://www.bitovi.com/hubfs/icon%20-%20frontend.svg) [Frontend development](https://www.bitovi.com/services/frontend-development-consulting?hsLang=en-us) - [View more → ](https://www.bitovi.com/digital-consulting-services?hsLang=en-us) We're Experts in... - [JavaScript](https://www.bitovi.com/services/frontend/javascript-consulting?hsLang=en-us) - [AI training](https://www.bitovi.com/ai-training-for-software-engineers?hsLang=en-us) - [Angular](https://www.bitovi.com/services/frontend/angular-consulting?hsLang=en-us) - [Design Systems](https://www.bitovi.com/services/axure-figma-migration?hsLang=en-us) - [React](https://www.bitovi.com/services/frontend/react-consulting?hsLang=en-us) - [Temporal](https://www.bitovi.com/services/backend/temporal-consulting?hsLang=en-us) - [React Native](https://www.bitovi.com/services/frontend/react-consulting/react-native?hsLang=en-us) - [Node.js](https://www.bitovi.com/services/backend/nodejs-consulting-1?hsLang=en-us) Showcase ![Yum! Brands](https://www.bitovi.com/hubfs/yum-showcase-link-1.png) [View case study](https://www.bitovi.com/en/bitovi-yum-case-study?hsLang=en-us) More Projects - [![Levi's](https://www.bitovi.com/hubfs/levis.svg)](https://www.bitovi.com/web-application-consulting-work/levis-ecommerce-responsive-redesign?hsLang=en-us) - [![Christie's International Real Estate](https://www.bitovi.com/hubfs/christies.svg)](https://design.bitovi.com/christies) - [![BAFS](https://www.bitovi.com/hubfs/bafs.svg)](https://www.bitovi.com/ux-design-consulting/ux-case-studies/bafs-ppp?hsLang=en-us) - [View more → ](https://www.bitovi.com/our-software-consulting-work?hsLang=en-us) Open Source Tools We build powerful tools and open source them to support the community. [See what we've built →](https://www.bitovi.com/open-source?hsLang=en-us) - [![Blog](https://www.bitovi.com/hubfs/icon%20-%20blog.svg) BlogWe post about perfecting software delivery ](https://bitovi.com/blog) - [![Partnerships](https://www.bitovi.com/hubfs/Handshake-1.svg) PartnershipsLearn about Bitovi's technology partners ](https://www.bitovi.com/partnerships?hsLang=en-us) - [![Academy](https://www.bitovi.com/hubfs/limbo/icons/icon-academy.svg) AcademyFree courses to build delivery skills ](https://www.bitovi.com/academy/?hsLang=en-us) - [![Open source tools](https://www.bitovi.com/hubfs/icon%20-%20open%20source.svg) Open source toolsUse our tools or contribute to our open source mission. ](https://www.bitovi.com/open-source?hsLang=en-us) Let's Connect - [![Discord](https://www.bitovi.com/hubfs/DiscordLogo.svg) Discord ](https://discord.gg/J7ejFsZnJ4) - [![LinkedIn](https://www.bitovi.com/hubfs/LinkedinLogo.svg) LinkedIn ](https://www.linkedin.com/company/bitovi/) - [![GitHub](https://www.bitovi.com/hubfs/GithubLogo.svg) GitHub ](https://github.com/bitovi/) ![Eggbot](https://www.bitovi.com/hubfs/build_assets/bitovi-limbo-cms-react/338/js_client_assets/assets/eggbot-LTGhdSGL.png) Name * Work Email * Phone What's your project? Send ### Contact Us (312) 620-0386contact@bitovi.com [Bitovi](https://www.bitovi.com/?hsLang=en-us) - [Services](https://www.bitovi.com/services?hsLang=en-us) - [Client Work](https://www.bitovi.com/client-work?hsLang=en-us) - [Our Team](https://www.bitovi.com/about?hsLang=en-us) - [Open Source](https://www.bitovi.com/open-source?hsLang=en-us) - [Blog](https://www.bitovi.com/blog?hsLang=en-us) - [Academy](https://www.bitovi.com/academy/?hsLang=en-us) [Contact Us](https://www.bitovi.com/contact?hsLang=en-us) - [ Advanced JavaScript ](https://www.bitovi.com/academy/learn-advanced-javascript.html?hsLang=en-us) - [ DOM and jQuery ](https://www.bitovi.com/academy/learn-dom-jquery.html?hsLang=en-us) - [ Debug JavaScript ](https://www.bitovi.com/academy/learn-to-debug-javascript.html?hsLang=en-us) - [ Learn TypeScript ](https://www.bitovi.com/academy/learn-typescript.html?hsLang=en-us) - [ Learn React ](https://www.bitovi.com/academy/learn-react-vite.html?hsLang=en-us) - [ Introduction to React ](https://www.bitovi.com/academy/learn-react-vite/intro-to-react.html?hsLang=en-us) - [ Setting Up Your Environment ](https://www.bitovi.com/academy/learn-react-vite/setting-up-your-environment.html?hsLang=en-us) - [ Introduction to JSX ](https://www.bitovi.com/academy/learn-react-vite/intro-to-jsx.html?hsLang=en-us) - [ Building Components ](https://www.bitovi.com/academy/learn-react-vite/components.html?hsLang=en-us) - [ Passing Props ](https://www.bitovi.com/academy/learn-react-vite/props.html?hsLang=en-us) - [ Routing in React ](https://www.bitovi.com/academy/learn-react-vite/routing.html?hsLang=en-us) - [ Styling in React ](https://www.bitovi.com/academy/learn-react-vite/styling-in-react.html?hsLang=en-us) - [ Managing State in React ](https://www.bitovi.com/academy/learn-react-vite/stateful-hooks.html?hsLang=en-us) - [ Making HTTP Requests ](https://www.bitovi.com/academy/learn-react-vite/making-http-requests.html?hsLang=en-us) - [ Creating Nested Routes ](https://www.bitovi.com/academy/learn-react-vite/nested-routes.html?hsLang=en-us) - [ Handling User Inputs and Forms ](https://www.bitovi.com/academy/learn-react-vite/controlled-vs-uncontrolled.html?hsLang=en-us) - [ Testing in React ](https://www.bitovi.com/academy/learn-react-vite/testing.html?hsLang=en-us) - [ Learn Web Components ](https://www.bitovi.com/academy/learn-web-components.html?hsLang=en-us) - [ Agile Program Management With Jira ](https://www.bitovi.com/academy/learn-agile-program-management-with-jira.html?hsLang=en-us) - [ Learn RxJS ](https://www.bitovi.com/academy/learn-rxjs.html?hsLang=en-us) - [ Giving a Training ](https://www.bitovi.com/academy/training.html?hsLang=en-us) - [ Learn Technology Consulting ](https://www.bitovi.com/academy/learn-technology-consulting.html?hsLang=en-us) - [ Learn React ](https://www.bitovi.com/academy/learn-react.html?hsLang=en-us) - [ Learn NgRx ](https://www.bitovi.com/academy/learn-ngrx.html?hsLang=en-us) - [ Learn Graphql ](https://www.bitovi.com/academy/learn-graphql.html?hsLang=en-us) - [ Learn Docker ](https://www.bitovi.com/academy/learn-docker.html?hsLang=en-us) - [ Learn CanJS ](https://www.bitovi.com/academy/learn-canjs.html?hsLang=en-us) - [ Learn Angular ](https://www.bitovi.com/academy/learn-angular.html?hsLang=en-us) - [ Advanced TypeScript ](https://www.bitovi.com/academy/advanced-typescript.html?hsLang=en-us) [View More Courses](https://www.bitovi.com/academy/#courses) [ ] # Routing in React `page` Learn how to set up and use React Router to update the application's user interface in response to URL changes. ## Overview Routing is a mechanism used by single-page applications to determine what their user interface looks like based on the browser's current URL. This follows the standard pattern for browsers where changing the URL fetches a new resource; however in client-rendered applications like React, there is no communication between the browser and server; instead, a specific component is displayed. Routing is crucial for: - User Experience (UX): Provides seamless navigation without page reloads. - Bookmarking: Enables users to bookmark or share URLs that lead directly to a specific state of the application. - Organization: Helps in structuring the application into logical views or components. We will use the [React Router](https://reactrouter.com/) package to provide routing for the Place My Order application. This router is popular in the React community and a great de facto choice when building a React application. ## Objective 1: Defining routes and Outlets Our goal is to split the homepage of our Place My Order application so that we only see the Home content on the homepage. In this section, we will: - Install React Router. - Set up a `RouterProvider` with static routes. - Create an `Outlet` to display the route's component. ### createBrowserRouter React Router works by matching the segments of the browser's URL path to components, i.e. each segment of the URL's path corresponds to a particular React component based on the segment's value. The mapping of a segment's value to a component is done through a collection of `RouteObject` items that are passed to the router when it is initialized. The `createBrowserRouter` function is a key part of React Router. This function is used to create a `router` object that defines the navigation structure of our app. The structure is defined through a configuration object that specifies the paths and corresponding components. Let’s break down its usage with the example below: ``` import React from 'react' import ReactDOM from 'react-dom/client' import { createBrowserRouter, RouterProvider } from 'react-router-dom' import AboutPage from './pages/AboutPage' import HomePage from './pages/HomePage' import App from './App.tsx' const router = createBrowserRouter( [ { path: '/', element: , children: [ { index: true, element: , }, { path: 'about', element: , }, ], }, ], { basename: import.meta.env.BASE_URL, }, ) ReactDOM.createRoot(document.getElementById('root')!).render( , ) ``` The first argument to `createBrowserRouter` is an array of route objects. Each route object represents a navigation route in our application, and it typically contains the following properties: - `path`: A string that defines the URL path for the route. - `element`: A React component that will be rendered when the route's path matches the current URL. - `children`: An array of nested route objects, allowing for the creation of nested URL structures. - `index`: A boolean for indicating that the route should act as a default or fallback route within a group of nested routes. The second argument to `createBrowserRouter` is an optional configuration object. In the code above, it sets the `basename`, which is the base URL for all locations. Here, it's dynamically set based on the environment variable `import.meta.env.BASE_URL`. This is useful for scenarios where your application is served from a subdirectory on your server. ### RouterProvider Next, we can use `RouterProvider` to render our `` component. Remember that our `main.tsx` file currently looks like this: ``` import React from 'react' import ReactDOM from 'react-dom/client' import App from './App.tsx' import './index.css' ReactDOM.createRoot(document.getElementById('root')!).render( , ) ``` Instead of only rendering our `` component, we can use ``: ``` import React from 'react' import ReactDOM from 'react-dom/client' import { createBrowserRouter, RouterProvider } from 'react-router-dom' import Home from './pages/Home' import RestaurantList from './pages/RestaurantList' import App from './App.tsx' import './index.css' const router = createBrowserRouter( [ { path: '/', element: , children: [ { index: true, element: , }, { path: 'restaurants', element: , }, ], }, ], { basename: import.meta.env.BASE_URL, }, ) ReactDOM.createRoot(document.getElementById('root')!).render( , ) ``` The `RouterProvider` requires the `router` object created by `createBrowserRouter`. This object contains all the route configurations and settings for our application. ### Outlet The final piece of React Router API that we need to use is the `` component. The `Outlet` component is used within a parent route component to render its child route components. Think of it as a marker that tells React Router, “Insert the child route component here.” When you define nested routes in your route configuration above, you don't immediately specify where in the parent component's JSX the child components should appear. Instead, you use `Outlet` in the parent component's JSX as a placeholder for where the matched child route component should be rendered. In the example below, the child component (`` or `` from our `createBrowserRouter` example) would be rendered inside the `
` element: ``` const Layout = () => { return ( <>
My awesome site
{/* Child routes will render here */}
©
); }; ``` ### Setup To get starting with React Router in our application, let’s install `react-router-dom` with npm: ✏️ Run: ``` npm install react-router-dom@6 ``` ✏️ Create **src/pages/Home/** (folder) ✏️ Create **src/pages/Home/index.ts** and update it to be: ``` export { default } from "./Home" ``` ✏️ Create **src/pages/Home/Home.tsx** and update it to be: ``` import HeroImage from "place-my-order-assets/images/homepage-hero.jpg" const Home: React.FC = () => { return (
Restaurant table with glasses.

Ordering food has never been easier

We make it easier than ever to order gourmet food from your favorite local restaurants.

) } export default Home ``` ✏️ Update **src/App.tsx** to be: ``` import { Outlet } from 'react-router-dom' import './App.css' function App() { return ( <>
) } export default App ``` ✏️ Update **src/main.tsx** to be: ``` import React from 'react' import ReactDOM from 'react-dom/client' import { createBrowserRouter, RouterProvider } from 'react-router-dom' import Home from './pages/Home' import RestaurantList from './pages/RestaurantList' import App from './App.tsx' import './index.css' ReactDOM.createRoot(document.getElementById('root')!).render( , ) ``` ### Verify ✏️ Update **src/App.test.tsx** to be: ``` import '@testing-library/jest-dom'; import { render, screen } from '@testing-library/react'; import { MemoryRouter } from 'react-router-dom'; import { describe, expect, it } from 'vitest'; import App from './App'; // Wrap App with MemoryRouter to mock routing const renderWithRouter = (ui, { route = '/' } = {}) => { window.history.pushState({}, 'Test page', route) return render(ui, { wrapper: MemoryRouter }); }; describe('App component', () => { it('renders without crashing', () => { renderWithRouter(); expect(screen.getByText(/place-my-order.com/i)).toBeInTheDocument(); }); it('contains the navigation bar with correct links', () => { renderWithRouter(); expect(screen.getByText('Home')).toBeInTheDocument(); expect(screen.getByText('Restaurants')).toBeInTheDocument(); const homeLink = screen.getByText('Home').closest('a'); expect(homeLink).toHaveAttribute('href', '/'); const restaurantsLink = screen.getByText('Restaurants').closest('a'); expect(restaurantsLink).toHaveAttribute('href', '/restaurants'); }); }); ``` ### Exercise 1 Create routes for the `` component and `` component. When the route is `""`, the `` component should display, and when the route is `/restaurants` then the `` component should display. These changes should be made in `src/App.tsx` and `src/main.tsx`. **Having issues with your local setup?** You can use either [StackBlitz](https://stackblitz.com/fork/github/bitovi/academy/tree/main/exercises/react-vite/06-routing/01-problem?file=App.tsx) or [CodeSandbox](https://codesandbox.io/p/devbox/github/bitovi/academy/tree/main/exercises/react-vite/06-routing/01-problem?file=App.tsx) to do this exercise in an online code editor. ### Solution Click to see the solution ✏️ Update **src/App.tsx** to be: ``` import { Outlet } from 'react-router-dom' import './App.css' function App() { return ( <>
) } export default App ``` ✏️ Update **src/main.tsx** to be: ``` import React from 'react' import ReactDOM from 'react-dom/client' import { createBrowserRouter, RouterProvider } from 'react-router-dom' import Home from './pages/Home' import RestaurantList from './pages/RestaurantList' import App from './App.tsx' import './index.css' const router = createBrowserRouter( [ { path: '/', element: , children: [ { index: true, element: , }, { path: 'restaurants', element: , }, ], }, ], { basename: import.meta.env.BASE_URL, }, ) ReactDOM.createRoot(document.getElementById('root')!).render( , ) ``` **Having issues with your local setup?** See the solution in [StackBlitz](https://stackblitz.com/fork/github/bitovi/academy/tree/main/exercises/react-vite/06-routing/01-solution?file=App.tsx) or [CodeSandbox](https://codesandbox.io/p/devbox/github/bitovi/academy/tree/main/exercises/react-vite/06-routing/01-solution?file=App.tsx). ## Objective 2: Creating links between pages Next, we want to update Place My Order to include links in our `
` so we can navigate between pages. We also want to update our `` component to use React Router for its link to the `/restaurants` page. ### Link The `Link` component is a basic building block in React Router. It allows you to create links in our application that navigate to different routes (or paths) defined in our React application. Use the `Link` component similarly to how you use an `` element in HTML. Instead of using `href`, you use `to` to specify the path. ``` About ``` When users click on this link, they are directed to the `/about` route in your application, without causing a full page reload. ### NavLink `NavLink` is a special version of the `Link` component that can add styling attributes to the rendered element when it matches the current URL. This is particularly useful for highlighting the active link in the navigation. Use `NavLink` in place of Link where you need to style the active link. ``` Home ``` The `activeClassName` prop is used to specify the class name that will be added when the link is active (i.e., when the path in the `to` prop matches the current URL). You can also use the `activeStyle` prop for inline styling. ### Match based on the current route The `activeClassName` API above is useful if you only need styling on the `` itself. However, if you want to style another element based on the current route, you’ll need to use the `useMatches` function: ``` const aboutMatch = useMatch('/about'); if (aboutMatch) { // The current path is /about } ``` In the example above, `aboutMatch` will be an object with details about the route if the current route is `/about`; otherwise, `useMatch` will return `undefined` if the current route is something else. ### Setup ✏️ Update **src/App.tsx** to be: ``` import { Link, Outlet, useMatch } from 'react-router-dom' import './App.css' function App() { return ( <>
) } export default App ``` ### Verify ✏️ Update **src/App.test.tsx** to be: ``` import '@testing-library/jest-dom'; import { render, screen } from '@testing-library/react'; import { MemoryRouter } from 'react-router-dom'; import { describe, expect, it } from 'vitest'; import App from './App'; // Wrap App with MemoryRouter to mock routing const renderWithRouter = (ui, { route = '/' } = {}) => { window.history.pushState({}, 'Test page', route) return render(ui, { wrapper: MemoryRouter }); }; describe('App component', () => { it('renders without crashing', () => { renderWithRouter(); expect(screen.getByText(/place-my-order.com/i)).toBeInTheDocument(); }); it('contains the navigation bar with correct links', () => { renderWithRouter(); expect(screen.getByText('Home')).toBeInTheDocument(); expect(screen.getByText('Restaurants')).toBeInTheDocument(); const homeLink = screen.getByText('Home').closest('a'); expect(homeLink).toHaveAttribute('href', '/'); const restaurantsLink = screen.getByText('Restaurants').closest('a'); expect(restaurantsLink).toHaveAttribute('href', '/restaurants'); }); it('highlights "Home" link as active when on the home page', () => { renderWithRouter(, { route: '/' }); expect(screen.getByText('Home').closest('li')).toHaveClass('active'); expect(screen.getByText('Restaurants').closest('li')).not.toHaveClass('active'); }); }); ``` ### Exercise 2 Add a Link and update class names based on route matching In the `` component, we want to use React Router for the link to `/restaurants`. In the `` component, we want to use React Router to add navigation links inside the `