In this lab you will setup a router to move between differnet components and display them.
- In the
App.js
require the component BrowserRouter and wrapp the whole app with it. - Define Routes to
[Posts, Dashboard, Products, Home]
with this links[/posts, /admin, /products, /]
- Make sure to use Switch component.
- Display each product in the
Products
component id using theProductDetails
component match id with compoent using:id
- In the ProductDetail component display the Id of the product next to the text "Product Details - {id}"
- After the use clicks
Save
he should go back to the/products
route and the history should be correct !!
- In the
Posts
component get the query string that is passed by the link, usingquery-string
, and display it on the console as an object. - In the Dasboard component fix the navigation to display a nested routing with relevent component in admin folder.
- Make sure to always prevent additonal requests to the server and make the app a Single Page App.