Route-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:

js
Скопіювати код
9
1
2
3
4
5
6
7
<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="about" element={<About />} />
    <Route path="*" element={<Error />} />
  </Routes>
</BrowserRouter>

• 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:

js
Скопіювати код
99
1
2
3
4
5
6
7
8
9
10
<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="about">
      <Route index element={<About />} />
      <Route path="updates" element={<Updates />} />
    </Route>
    <Route path="*" element={<Error />} />
  </Routes>
</BrowserRouter>

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/.