**Course Title:** Mastering React.js: Building Modern User Interfaces **Section Title:** Routing with React Router **Topic:** Using route parameters and nested routes **Introduction** In the previous topic, we covered the basics of React Router and setting up routes and navigation. In this topic, we will dive deeper into two advanced routing concepts: using route parameters and nested routes. These features allow you to create more complex and dynamic user interfaces, making your application more engaging and user-friendly. **What are Route Parameters?** Route parameters are values that are passed to a route as part of the URL. They are used to identify specific data or resources within your application. For example, in a blog application, you might have a route that displays a single post, and the URL would include the post's ID as a parameter. **Example: Using Route Parameters** Suppose we have a simple blog application with a route that displays a single post: ```jsx import React from 'react'; import { Link, Route, useParams } from 'react-router-dom'; const Post = () => { const { id } = useParams(); const post = posts.find((p) => p.id === parseInt(id)); return ( <div> <h1>{post.title}</h1> <p>{post.content}</p> </div> ); }; const posts = [ { id: 1, title: 'Post 1', content: 'This is post 1' }, { id: 2, title: 'Post 2', content: 'This is post 2' }, ]; const App = () => { return ( <div> <h1>Blog</h1> <ul> {posts.map((post) => ( <li key={post.id}> <Link to={`/posts/${post.id}`}>{post.title}</Link> </li> ))} </ul> <Route path="/posts/:id" component={Post} /> </div> ); }; ``` In this example, the `Post` component uses the `useParams` hook to access the `id` parameter passed to the route. The `App` component maps over the `posts` array and creates a link to each post, including the `id` parameter in the URL. **What are Nested Routes?** Nested routes are routes that are defined inside other routes. They allow you to create a hierarchical structure of routes, making it easier to manage complex navigation. **Example: Using Nested Routes** Suppose we have a simple e-commerce application with a route that displays a product list: ```jsx import React from 'react'; import { Link, Route, Switch, BrowserRouter } from 'react-router-dom'; const ProductList = () => { return ( <div> <h1>Product List</h1> <ul> {products.map((product) => ( <li key={product.id}> <Link to={`/products/${product.id}`}>{product.name}</Link> </li> ))} </ul> </div> ); }; const ProductDetail = () => { return ( <div> <h1>Product Detail</h1> <p>{product.name}</p> </div> ); }; const products = [ { id: 1, name: 'Product 1' }, { id: 2, name: 'Product 2' }, ]; const App = () => { return ( <BrowserRouter> <Switch> <Route path="/products" component={ProductList} /> <Route path="/products/:id" component={ProductDetail} /> </Switch> </BrowserRouter> ); }; ``` In this example, the `ProductList` component displays a list of products, and the `ProductDetail` component displays the details of a single product. The `App` component uses the `BrowserRouter` component to enable client-side routing, and defines two routes: one for the product list and one for the product detail page. **Key Concepts** * Route parameters: values passed to a route as part of the URL * Nested routes: routes defined inside other routes * Client-side routing: routing that occurs on the client-side, rather than on the server-side **Practical Takeaways** * Use route parameters to pass data between routes * Use nested routes to create a hierarchical structure of routes * Use client-side routing to enable dynamic navigation **Exercise** Create a simple blog application with a route that displays a single post, and a nested route that displays a list of posts. Use route parameters to pass the post ID to the nested route. **Leave a comment or ask for help if you have any questions or need further clarification!** [External links] * React Router documentation: <https://reactrouter.com/> * React Router GitHub repository: <https://github.com/reactjs/react-router> Note: This is just a sample course material, and you may need to adjust it according to your specific needs and requirements.