bharatgl / React-Router-Building-Using-a-Custom-Context-Provider-Component-What-is-Rout---ee67rec2voxx

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

React Router Easy

In this project, you will be making use of core concepts of the react-router v6.

Firstly implement the components for the page in pages directory. Inside src/pages/Home.js, display a div with id="home-page" with text "Home Page" inside it.

Do the same for src/pages/Index.js, display a div with id="index-page" with text "Index Page" inside it.

In the src/pages/NotFound.js, display a div with id="not-found-page" with text "Not found page" inside it.

These will be all the pages we will be needing.

Now in src/components/NavBar.js, Make a semantic navbar (ex:- nav ul li) which has two links. Use NavLink component, first link will have class = "index-link" with path pointing to "/" , and second link will have class = "home-link" with path pointing to "/home".

Now the heart of our App, the routes will be set up in src/AppRoutes.js You will be making 3 routes, one for Index page which shows the Index page component with path="/", one for Home page with path="/home".

All other paths will lead to showing NotFound page component.

About


Languages

Language:JavaScript 91.7%Language:HTML 8.3%