Thec News - Web App

A React app to practice React Router v6

Here is a working live demo tech-news-react-router

Table of contents

• About this project
• Objective
• Technologies
• Setup

About this project

In this project, I practice using React Router to add client-side routing to a React Application.

Objective

The objective is to add client-side routing to the application using React Router so that:

• Install react-router-dom and add it to a React application.
• Enable routing by using RouterProvider and providing a router.
• Creating a router using createBrowserRouter().
• Use createRoutesFromElements() to configure a router.
• Use the Route component to add static and dynamic routes to an application.
• Use Link and NavLink components to add links to an application.
• Access the values of URL parameters using React Router’s useParams hook.
• Create nested routes using Route, Outlet, and relative paths.
• Declaratively redirect users by rendering React Router’s Navigate component
• Imperatively redirect users via the useNavigate hook.
• Access and set the value of query parameters using React Router’s useSearchParams hook.

Technologies

• React 18
• React Router 6

Setup

To run this project, install it locally using npm:

$ cd ../[directory]
$ npm install
$ npm start