View Code? Open in Web Editor
NEW
This project forked from austincodingacademy/react-router-dom-practice
Let't practice using react router.
CSS 1.24%
HTML 0.53%
JavaScript 98.23%
advanced-react-router-practice's Introduction
- Fork, Clone, yarn install, yarn start
- Slight quirk - refreshing doesn't work from any path other than the default one so you will have to go back to the default path to refresh
- Import BrowserRouter,Switch and Route from react-router-dom
- Import components needed
- Create the appropriate routes
{/* PUT YOUR ROUTES HERE */}
- Make sure the default route goes at the bottom
- Make sure BrowserRouter wraps everything
- Make sure you use the component prop, not render.
- / -> Dashboard
- /charts -> Charts
- /tables -> Tables
- /settings -> Settings
- /wall -> Wall
- /profiles -> Profiles
- /marquee/:text -> Marquee
- /profile/:id -> Profile
Create these components. The content of the components is not important, just put anything <div> whatever </div>
- Charts.js
- Tables.js
- Settings.js
- Wall.js
- Profiles.js
- Import Link from react-router-dom
- change the
<a> to be a Link that links to /profile/ + user.id
- Profile.js
- Change the hard coded 0 with the value from the parameter id
- Dashboard.js
- Marquee
- replace the hard coded "hello" with the text parameter from the route
- Import Link from react-router-dom
- Create links to all the routes except Profile
- Hard code some links to Marquee
- /marquee/iloveroutes
- /marquee/reactrouterrules
- …etc
advanced-react-router-practice's People
Contributors
Watchers
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent