https://github.com/simonapiz/tech-news
Use React Router to implement routing in a web app
https://github.com/simonapiz/tech-news
codecademy-solutions front-end-development javascript react react-router
Last synced: 2 months ago
JSON representation
Use React Router to implement routing in a web app
- Host: GitHub
- URL: https://github.com/simonapiz/tech-news
- Owner: SimonaPiz
- Created: 2024-12-06T16:09:47.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-06T17:22:05.000Z (over 1 year ago)
- Last Synced: 2025-03-31T06:29:31.655Z (about 1 year ago)
- Topics: codecademy-solutions, front-end-development, javascript, react, react-router
- Language: JavaScript
- Homepage: https://tech-news-react-router.netlify.app/
- Size: 406 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Thec News - Web App
> A React app to practice React Router v6
Here is a working live demo [tech-news-react-router](https://tech-news-react-router.netlify.app/)
## Table of contents
* [About this project](#about-this-project)
* [Objective](#objective)
* [Technologies](#technologies)
* [Setup](#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
```