Fundamentals of React - Routing with React Router

Exercise: Broken Routing


Exercise: Routing

1) Bug: Multiple "pages" are showing up at the same time when we only expect one at a time. Fix this.

- <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.

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

- 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