Outline
Outline
Solution: Routing
https://stackblitz.com/edit/react-8xeheb
Objectives
1) Bug: Multiple "pages" are showing up at the same time when we only expect one at a time. Fix this.
Hints:
- <Switch> tag is missing
- Wrap the <Route> tags in a <Switch> tag.
2) Bug: Clicking through the link pages does not properly switch between the page components. Fix this.
Hints:
- Try to determine what component is being rendered.
- Try changing the order of routes
- OR, the "exact" attribute may be helpful here.
3) Swap the order so the navigation bar is below the page content.
4) Modify the app so '/contact' shows "Contact Page" and "/contact/us" shows "Contact Page for US".
Hints:
- Add a <Link> tag for "/contact/us"
- You can try adding another route for "/contact/:country"
- Route order matters
- Instead of adding another route, you could specify an optional url paramter with a ? suffix for instance: ":name?"