React
Fundamentals of React - Routing with React Router

Exercise: Broken Routing

PRO

Exercise: Routing

https://stackblitz.com/edit/react-tlpl91

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?"
 

I finished! On to the next chapter