In this exercise, you will practice using React Router to create a multi-page React application. The application that you will be working on today is called Cohort Tools. It is a simple application that allows a teacher to manage students in a cohort of a coding bootcamp.

• Fork this repo
• Clone this repo

cd lab-react-cohort-tools
npm install
npm run dev

• Upon completion, run the following commands:

  git add .
  git commit -m "done"
  git push origin master
  

• Create a Pull Request and submit your assignment.

To help you get started quickly and let you focus only on practicing React Router without any distractions, we have provided you with the starter code and all the required page components. This means there's no need for you to create any new components. Instead, your task is to set up React Router and use it to display the provided pages.

Once you are done setting up the React Router and the navigation between pages, you will need to use React Router to access URL parameters and create a dynamic page that renders content based on the URL parameter values. Let's get started!

Set up React Router in your src/main.jsx file following the below example:

Example

// src/main.jsx
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { BrowserRouter as Router } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>
);

In the App.jsx, you will find the following page components:

• <HomePage />
• <StudentDetailsPage />
• <UserProfilePage />

These components are currently being rendered one below the other. Each component has a border around it to distinguish between each page component more easily. Your task is to set up React Router routes and show them on specified routes.

In your App.jsx set up three routes that render the page components as follows:

• Route / for the HomePage.
• Route /students/:studentId for the StudentDetailsPage.
• Route /profile for the UserProfilePage.

To make it easy to move from one page to another without having to manually enter a new URL, it is important to provide a way to navigate between different pages of your application. The React Router's Link element allows you to create links that allow users to navigate from one page to another.

Add the links in the following components as explained below:

1. In the Navbar component:

   • A link to /profile (User Profile Page) on the user icon in the top right corner.

   • A link to / (Home Page) on the logo in the top left corner.

   
   
   See Expected Result

   

   
   

2. In the UserProfilePage component:

   • A link to / (Home Page) on the Back button that takes you back.
   
   
   See Expected Result

   

   
   

3. In the StudentDetailsPage component:

   • A link to / (Home Page) on the Back button that takes you back.
   
   
   See Expected Result

   

   
   

4. In the HomePage component:

   • A link to /students/:studentId (Student Details Page) on each student list item in the list of students. The link should contain the student's _id as a URL parameter.
   
   
   See Expected Result

   

   
   

If you have correctly implemented the link in the previous step, when a user clicks on any student card shown on the list on the home page, they should be navigated to the StudentDetailsPage, as shown below. Additionally, the URL displayed in the address bar should change to /students/:studentId, where the :studentId is the actual _id of the selected student, for example /students/1.

The component StudentDetailsPage currently displays the same content at all times, featuring a student with an _id 1, since the value was hard-coded. Your task is to update the component logic and make the component dynamic so that it shows the information of the selected student.

To be able to find a corresponding student that was selected, you'll need to access the studentId passed as the URL parameter. To access the URL parameters from the browser's URL bar, use the React Router hook useParams.

If you need a reminder on how to set up the useParams hook and access the URL parameters, check this example.

Happy coding! 💙

npm install react-router-dom

import { BrowserRouter as Router } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>
);

import { Routes, Route } from "react-router-dom";

import { Routes, Route } from "react-router-dom";
import HomePage from "./pages/HomePage";
import AboutPage from "./pages/AboutPage";

function App() {
  return (
    <div className="App">
      {/* Add <Route /> components between <Routes> </Routes>   */}
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
      </Routes>
    </div>
  );
}

export default App;