Welcome back! Now that you've learned how to implement a service layer for data management, it's time to enhance your React application by introducing routing. Routing is a key feature in web applications that allows users to navigate between different pages or views. In this lesson, you'll learn how to implement routing using React Router, a popular library for managing navigation in React applications.

In this lesson, you'll discover how to set up routing in your React application using React Router. This will enable you to create a seamless navigation experience for your users. Here's a glimpse of what you'll be working with:

// src/App.jsx
import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Todos from './components/Todos';
import TodoDetails from './components/TodoDetails';

function App() {
  return (
    <Router>
        <Routes>
            <Route exact path="/" element={<Todos />} />
            <Route exact path="/todos" element={<Todos />} />
            <Route path="/todos/:id" element={<TodoDetails />} />
        </Routes>
    </Router>
  );
}

export default App;

In this example, you'll see how to define routes for different components in your application. You'll learn how to use the Router, Routes, and Route components to manage navigation and display the appropriate content based on the URL.

Let's see how different components can be rendered based on the URL path using React Router.

• /: Renders the Todos component, this means that when the user navigates to the root URL, they will see the list of todos. In our case it will be localhost:3000/.
• /todos: Renders the Todos component, this means that when the user navigates to the /todos URL, they will see the list of todos. In our case it will be localhost:3000/todos. Notice that for now both "/" and "/todos" routes point to the Todos component. However, this structure allows future modifications where "/" might have a different landing page while "/todos" remains dedicated to listing tasks.
• /todos/:id: Renders the TodoDetails component, this means that when the user navigates to the /todos/:id URL, they will see the details of a specific todo. In our case it might look like this localhost:3000/todos/1.
  • The :id is a route parameter that allows you to access the value of the id parameter in the TodoDetails component.

Notice, that the routes have exact set to true for the / and /todos paths. This ensures that the Todos component is only rendered when the URL exactly matches these paths. In contrast, if we skip the exact prop, the Todos component would be rendered for any URL that starts with /todos, including /todos/some-other-path.

Let's take a closer look at how to pass parameters to components using React Router. In the example above, the TodoDetails component is rendered when the user navigates to the /todos/:id URL. The :id part of the URL is a route parameter that represents the unique identifier of a todo item.

Here's how you can access the id parameter in the TodoDetails component:

// src/components/TodoDetails.jsx
import React from 'react';
import { useParams } from 'react-router-dom';

function TodoDetails() {
  const { id } = useParams();

  return (
    <div>
      <h2>Todo Details</h2>
      <p>Todo ID: {id}</p>
    </div>
  );
}

export default TodoDetails;

In this example, the useParams hook from react-router-dom is used to access the id parameter from the URL. This allows you to display the details of the todo item with the specified id. The name of the parameter (id in this case) should match the name defined in the route path (/todos/:id).

Implementing routing is crucial for creating dynamic and user-friendly web applications. It allows users to navigate between different views without reloading the page, providing a smoother and more interactive experience. By mastering routing, you'll be able to build applications that are not only functional but also intuitive and easy to use. This skill is essential for any developer looking to create modern web applications.

Are you excited to enhance your React application with routing? Let's dive into the practice section and start building a more interactive and user-friendly application!