Skip to content

Latest commit

 

History

History
51 lines (31 loc) · 1.81 KB

lab-router.md

File metadata and controls

51 lines (31 loc) · 1.81 KB

Router Lab

React Router Recap and Exercise

Recap

What have we learned so far?

  • Single Page Applications have specific URLs that are routed to display

    different content.

  • React Router is a third-party library that we can install and use with React.

  • Since React Router isn't built in to React, we must import its components.

  • React Router makes it easy for us to route URLs to components.

  • React Router automatically manipulates modern browser history mechanics.

Now let's put that to the test!

You Do: Implement Router

Let's create the scaffolding for a restaurant website called restaurant_router.

Your site needs to have five pages:

  • Home (landing page)
  • Menu
  • About
  • Contact

Task:

  • Each page is a component - we're learning to use React Router here!
  • Create a navigation menu of list items that Route to each page.
    • These pages don't need to have much content — just the header at the top saying what the page is and a paragraph description of your choosing.

Fun Note: There's no reason you can't change the CSS, if you'd like! The CSS file that you'll change is App.css. If you'd like, you can grab ours here.

  • Thought exercise: Why is that the only CSS file you need to change?

Hint: Do you have react-router-dom installed for this project?