**Create a Multi-Page Application with React Router, Implementing Navigation and Route Management (Lab Topic)** **Overview** In this lab topic, you will create a multi-page application using React Router, implementing navigation and route management. You will learn how to use React Router to create routes, navigate between routes, and manage route parameters. This topic builds upon the previous topics on React Router, covering the essential concepts and techniques for building a robust and scalable single-page application (SPA). **Prerequisites** * Familiarity with React Router and its concepts * Understanding of React components and state management * Basic knowledge of HTML, CSS, and JavaScript **Step 1: Setting up the Application** Create a new React application using Create React App: ``` npx create-react-app my-app ``` Replace `my-app` with the name of your application. **Step 2: Installing React Router** Install React Router using npm: ``` npm install react-router-dom ``` **Step 3: Creating Routes** Create a new file called `Routes.js` in the `src` directory: ``` // src/Routes.js import { BrowserRouter, Route, Switch } from 'react-router-dom'; import Home from './Home'; import About from './About'; import Contact from './Contact'; function App() { return ( <BrowserRouter> <Switch> <Route path="/" exact component={Home} /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /> </Switch> </BrowserRouter> ); } export default App; ``` In this example, we define three routes: `/`, `/about`, and `/contact`. The `Switch` component ensures that only one route is rendered at a time. **Step 4: Creating Components** Create three new files called `Home.js`, `About.js`, and `Contact.js` in the `src` directory: ``` // src/Home.js import React from 'react'; const Home = () => { return ( <div> <h1>Welcome to the Home Page</h1> <p>This is a sample home page.</p> </div> ); }; export default Home; ``` ``` // src/About.js import React from 'react'; const About = () => { return ( <div> <h1>About Us</h1> <p>This is a sample about page.</p> </div> ); }; export default About; ``` ``` // src/Contact.js import React from 'react'; const Contact = () => { return ( <div> <h1>Get in Touch</h1> <p>This is a sample contact page.</p> </div> ); }; export default Contact; ``` **Step 5: Implementing Navigation** Update the `App.js` file to include a navigation bar: ``` // src/App.js import React from 'react'; import { Link } from 'react-router-dom'; import Routes from './Routes'; function App() { return ( <div> <nav> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> <li> <Link to="/contact">Contact</Link> </li> </ul> </nav> <Routes /> </div> ); } export default App; ``` In this example, we use the `Link` component from `react-router-dom` to create links between routes. **Step 6: Testing the Application** Start the application using `npm start` and navigate to different routes using the navigation bar. Verify that each route is rendered correctly. **Key Concepts** * Using React Router to create routes and manage navigation * Understanding the `Switch` component for rendering multiple routes * Creating and linking components using `Link` from `react-router-dom` * Using `BrowserRouter` for client-side routing **Practical Takeaways** * Use `react-router-dom` for client-side routing and navigation * Use `BrowserRouter` for creating routes and managing navigation * Create separate components for each route and link them using `Link` from `react-router-dom` * Use `Switch` to ensure that only one route is rendered at a time **Additional Resources** * React Router documentation: <https://reactrouter.com/> * React Router API documentation: <https://reactrouter.com/api> **Ask for Help** If you have any questions or need help with this lab topic, please leave a comment below. **Leave a Comment** If you have any feedback or would like to ask a question, please leave a comment below. I'll do my best to respond promptly. Note: This is just a sample course material and may need to be adapted to fit the specific needs and requirements of your course.