course content

Course Content

Introduction to React

Route-Based RenderingRoute-Based Rendering

We can render components based on URLs. To do that, we need to use the following components:

  • We use BrowserRouter to enclose all the other code in the main React component;
  • Routes is used for enclosing all individual Route components and their child components. It returns a single React component based on the URL. There can be multiple <Routes> components in the code;
  • Route represents a URL path and points to a React component.

Look at the example from the previous chapter:

  • The <Routes> component groups all the <Route> components and returns the most relevant React component based on the current user's URL path;
  • The <Route> component has two attributes: path and element. The path attribute is the relative path based on the parent component. It will make more sense with further explanation. The element stores a reference to the React component that the URL should render;
  • We can nest <Route> components to create nested routes. For example, to create http://***.com/about/updates path, we can change the structure like this:

In the above code, we created an about path but didn't specify a target component. Instead, we created two nested routes.

The first nested Route doesn't have a path attribute but, instead, an index, which indicates that its path is that of the parent Route.

The other one points to the Update component having path updates - React Router automatically considers this path relative to the parent path, that is, http://***.com/about/.

question-icon

Which of the following is NOT a component provided by React Router?

Select the correct answer

Everything was clear?

Section 7. Chapter 2