manikanta251 / reactjs-routingpractice Goto Github PK

• Extra Small (Size < 576px), Small (Size >= 576px), Medium (Size >= 768px)
• Large (Size >= 992px) and Extra Large (Size >= 1200px)

• Download dependencies by running npm install
• Start up the app using npm start

The app must have the following functionalities

• When the About link in the header is clicked, then the page should navigate to the AboutRoute
• When the Contact link in the header is clicked, then the page should navigate to the ContactRoute
• When the Home link in the header is clicked, then the page should navigate back to the HomeRoute
• When an undefined path is provided in the URL, then the page should navigate to the NotFoundRoute

Use these files to complete the implementation:

• src/components/App.js
• src/components/App.css
• src/components/Header/index.js
• src/components/Header/index.css
• src/components/Home/index.js
• src/components/Home/index.css
• src/components/About/index.js
• src/components/About/index.css
• src/components/Contact/index.js
• src/components/Contact/index.css
• src/components/NotFound/index.js
• src/components/NotFound/index.css

The following instructions are required for the tests to pass

• HomeRoute should consist of "/" in the URL path
• AboutRoute should consist of "/about" in the URL path
• ContactRoute should consist of "/contact" in the URL path
• No need to use the BrowserRouter in App.js as we have already included in index.js file

• https://assets.ccbp.in/frontend/react-js/wave-logo-img.png alt should be wave
• https://assets.ccbp.in/frontend/react-js/home-blog-img.png alt should be home
• https://assets.ccbp.in/frontend/react-js/about-blog-img.png alt should be about
• https://assets.ccbp.in/frontend/react-js/contact-blog-img.png alt should be contact
• https://assets.ccbp.in/frontend/react-js/not-found-blog-img.png alt should be not found

• Roboto