React_Router_prework.md

React Router Prework

Router Overview

React Router is a library that allows us to make our single page React applications mimic the behavior of multipage apps. It provides the ability to use browser history, allowing users to navigate with forward / back buttons and bookmark links to specific views of the app. Most modern sites use some form of routing. React Router exposes this functionality through a series of components. Let's start by looking at the overall structure of an app using router:

1. Take a look at the quick start page of the React Router docs. Take note of the syntax and organization of the page. No worries if this looks unclear right now! (nothing to answer here)

2. What package do we need to install to use React Router?

   • Create React App

Router Components

React Router provides a series of helpful components that allow our apps to use routing. These can be split into roughly 3 categories:

• Routers
• Route Matcher
• Route Changers

Routers

Any code that uses a React-Router-provided component must be wrapped in a router component. There are lots of router components we can use, but we'll focus on one in particular. Let's look into the docs to learn more.

3. What is a <BrowserRouter />?

   • Uses a regular URL paths -
   • Best looking URL

4. Why would we use <BrowserRouter /> in our apps?

   • This helps us get router started in apps

Route Matchers

5. What does the <Route /> component do?

   • Routes to other app and class components

6. How does the <Route /> component check whether it should render something?

   • It reads the code from top to bottom and when a meets a condition, React will render the component

7. What does the <Switch /> component do?

   • Switch looks through its children Route(rs) to check for rendering conditions

8. How does it decide what to render?

   • The decision is made with a /path inside the
   • This matches the URL path
   • use the URL path if a component with information is inside that path

Route Changers

9. What does the <Link /> component do? How does a user interact with it?

   • The will createa link in the html. This will create a link to go to one place.

10. What does the <NavLink /> component do? How does a user interact with it?

    • style itself as active when its to prop matches the current location

11. What does the <Redirect /> component do?

    • force navigation, like to a login page or a 404 error re-direct.