Learn

With our router in place, we can begin defining the different views, or routes, that our application will render for various URL paths. For example, we might want to render an About component for the /about path and a SignUp component for the /sign-up path. React Router gives us two options to define routes: JSX or objects. In this lesson, we’ll be learning to implement routes using JSX notation. If you’re interested, you can learn more about object notation here.

The .createBrowserRouter method accepts an array of <Route> objects, so we’ll need to use React Router’s .createRoutesFromElements method to configure our routes with JSX. We also need to use React Router’s <Route> component to define our routes. These components can be imported from the react-router-dom package, alongside the .createBrowserRouter method, like so:

import { RouterProvider, createBrowserRouter, createRoutesFromElements, Route } from `react-router-dom`

The <Route> component is designed to render (or not render) a component based on the current URL path. Each <Route> component should include:

  1. A path prop indicating the exact URL path that will cause the route to render.
  2. An element prop describing the component to be rendered.

For example, we can use .createRoutesFromElements to configure a <Route> that renders the <About> component when the URL path matches '/about':

import About from './About.js';
import { RouterProvider, createBrowserRouter, Route } from 'react-router-dom';
const router = createBrowserRouter(createRoutesFromElements(
  <Route path='/about' element={ <About/> } />
));

export default function App () {
  return (
    <RouterProvider router={ router } />
  );
}

In many cases, there may be certain components, like sidebars, navigation bars, and footers, that we want to render with every page view. We can achieve this by defining a root-level component that contains layout elements we want to render consistently. We can then nest the rest of our routes within this root-level component, like so:

/* imports ... */

const router = createBrowserRouter(createRoutesFromElements(
  <Route path='/' element={ <Root/> }>
    // nested routes here will render along with the <Root/> component
  </Route>
));

With this route configuration, whenever a user navigates to one of the nested routes, that view will render, along with any elements we’ve defined in our <Root/> component. We’ll discuss root-level components and nested components in greater detail in the upcoming exercises. Before we move on, let’s practice adding routes to our application so that our application will render the correct component when we visit certain paths.

Instructions

Task 1

Navigate to App.js where we will begin adding routes to our router. First, add createBrowserRouter, createRoutesFromElements and Route to the import statement.

Hint

To import multiple values from a package, you can write something like this: 
import { valueA, valueB } from 'package';

Task 2

Next, let’s render the main routes of the application. As you can see, at the top of App.js a number of components are being imported but not used. For now, we’ll render the About, SignUp, Articles, Categories, and Profile components.

Using createBrowserRouter, createRoutesFromElements, and Route, let’s define our routes between the opening and closing tags of the Root route (we’ll understand what exactly we’re doing here when we talk about nested routes) for the following components to their respective paths:

  • About: /about
  • SignUp: /sign-up
  • Articles: /articles
  • Categories: /categories
  • Profile: /profile
Hint

The syntax for using `createBrowserRouter`, `createRoutesFromElements`, and `Route` inside a `Root` `Route` looks like: 
const router = createBrowserRouter(createRoutesFromElements(
  <Route path="/" element={ <Root/> }>  {/* root route */}
    <Route path="mypath" element={ <MyComponent/> } />  {/* nested route */}
    <Route path="myotherpath" element={ <MyOtherComponent/> } />  {/* nested route */}
  </Route>
));

Be sure to nest your routes within the Root route.

Task 3

Test that your code works by navigating to these URLs in your browser. For example, to see the About component, navigate to http://localhost:3000/about.

You should see each component render only when the URL matches the appropriate path. You should see the Header and Footer rendered regardless of the URL.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?