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:
- A
path
prop indicating the exact URL path that will cause the route to render. - 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.