Learn

With the Router component 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.

To do this, we must use the Route component provided by the react-router-dom package. This component can be imported alongside the BrowserRouter like so:

import { BrowserRouter as Router, 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:

be rendered inside a Router.
have a path prop indicating the URL path that will cause the route to render.
wrap the component that we want to display in the event that the path prop matches.

For example, the following Route renders the About component when the URL path matches '/about':

<Router>
  <Route path='/about'>
    <About />
  </Route>
</Router>

If your router includes a Route with no path prop, then that route will always match and render. You can leverage this fact to make your application render components that you want your user to see regardless of the current route, such as sidebars and navigation bars.

<Router>

  {/* Renders when the URL matches '/about' */
  <Route path='/about'>  
    <About />
  </Route>

  {/* Always renders */}
  <Route>
    <Sidebar />
  </Route>

</Router>

Whereas other routing paradigms are static (eg. routes are predefined prior to and separate from the process of rendering), React Router’s philosophy is declarative and dynamic. This means that routes come into being when they are rendered. While this might seem more complicated than configuring our routes statically, it’s also more flexible. As you’ll see throughout this lesson, our application’s route structure can evolve based on user interactions and changing state.

Instructions

Task 1

Navigate to App.js where we will begin adding routes to our Router. First, add the Route component 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.

Between the <main> tags, use the Route component to render the following components for their respective paths:

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

Hint

Your syntax for adding a route should look something like this:

<Route path='/your-path-here'>
  <ChildComponent />
</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

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

Or sign up using:

Already have an account?