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:

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

Everything was clear?

Section 7. Chapter 2

Course Content

Introduction to React

1. Getting Started: ES6

Why React?Node.js and npm ES6 Variables ES6 Arrow Functions ES6 Map Method ES6 Destructuring ES6 Spread Operator ES6 Ternary Operator

2. Getting Started: JSX

JSX Introduction JSX Variables & Nested Elements JSX Embedding Expressions JSX Specifying Attributes Getting Started with React

3. React in Practice

Getting familiar with JSX Writing more Complex Elements using JSX Creating a React-Based Project Structure of a React Project

4. React Components

Introduction to Components Functional Components Creating React Components Importing Components

5. Controlling Data & Content

Passing Data into Components Conditional Rendering Loop Based Rendering Keys in Lists Event Handling Creating a TODO Application

6. Hooks

Introduction to Hooks Using the State Hook The Effect Hook Rules of Using Hooks Creating Custom Hooks Fixing the Todo Application

7. React Router

Introduction to React Router Route-Based Rendering Creating Navigation Bars Using Params