Build a Multi-Page Online Course Website with React Router

Creating a multi-page website is a fundamental skill for any web developer. This article walks you through the process of building a course listing website with React, focusing on implementing navigation between pages using React Router. An accompanying video walks through the full process.

This guide demonstrates how to set up React Router to navigate between different course pages in a React application. It covers installing the necessary dependencies, configuring routes in `app.js`, and implementing navigation using the `useNavigate` hook. By the end of this tutorial, you’ll have a functional multi-page website where users can click on a course and be directed to a dedicated page for that course.

Setting Up React Router

The first step in creating a multi-page website is to install React Router. React Router is a standard library for routing in React, enabling navigation between different views or components. To install it, use the following command in your project’s terminal:

npm install react-router-dom

Once the installation is complete, ensure your application is running correctly. Next, you’ll need to configure the routing in your index.js and app.js files.

Configuring index.js

In your index.js file, wrap your entire application with the BrowserRouter component. This component enables the use of routing features throughout your application. If it’s not already there, make sure to add the BrowserRouter.

javascript import { BrowserRouter } from ‘react-router-dom’;

// …

root.render(

);

Configuring app.js

Now, open your app.js file. Here, you’ll define the routes for your application. Import the necessary components from react-router-dom, such as Routes and Route. Wrap your routes within the <Routes> tag. Each route defines a specific path and the component that should be rendered when that path is accessed.

javascript import { Routes, Route } from ‘react-router-dom’; import Home from ‘./pages/Home’; import PlayVideo from ‘./pages/PlayVideo’;

function App() { return (

); }

export default App;

In this example, the default route ("/") renders the Home component. Additionally, a route for playing videos (/playvideo/:id) is defined. The :id is a dynamic parameter that allows you to pass the video ID in the URL.

Creating the PlayVideo Page

Create a new file named PlayVideo.js in your pages directory. This component will be responsible for displaying the video and related information when a user clicks on a course. Start with a basic template for the component.

javascript import React from ‘react’;

function PlayVideo() { return (

); }

export default PlayVideo;

Implementing Navigation

To enable navigation from the course list to the PlayVideo page, you’ll need to implement an onClick handler on each course item. This handler will use the useNavigate hook from React Router to navigate to the appropriate URL.

Using the useNavigate Hook

In your VideoGridList component (or wherever you are displaying the course list), import the useNavigate hook from react-router-dom. Inside the component, call the hook to get the navigate function.

javascript import { useNavigate } from ‘react-router-dom’;

function VideoGridList({ videos }) { const navigate = useNavigate();

// … }

Handling the Click Event

Now, add an onClick handler to each course item. This handler should call the navigate function with the URL for the PlayVideo page, including the video ID as a parameter.

javascript function VideoGridList({ videos }) { const navigate = useNavigate();

const handleClick = (item) => { navigate(/playvideo/${item.id}); };

return (

  ))}
</div>

praise

Articles: 97