React Router Prework.md

Questions / Readings - Nick Hart

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? react-dom-router

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 />?
   It's a type of router object that will wrap our App instantiation - it uses the history API to keep the UI in sync with the URL.

4. Why would we use <BrowserRouter /> in our apps? It gives us the ability to use browser history, and it keeps the UI in sync with the URL.

Route Matchers

5. What does the <Route /> component do?
   It renders its respective component when the url matches its path.

6. How does the <Route /> component check whether it should render something?
   It checks the url against the path assigned to it.

7. What does the <Switch /> component do?
   Switch renders exclusively, meaning it only renders the first child whose path matches the url.

8. How does it decide what to render?
   It'll only target the first exact match, and then only render that specific route.

Route Changers

9. What does the <Link /> component do? How does a user interact with it?
   A <Link /> component sets the url, and basically functions like an anchor tag. The user interacts with it like they would with any other link - they click on it.

10. What does the <NavLink /> component do? How does a user interact with it?
    It's a special <Link /> component. Functions the same way, but you can add attributes such as activeClassName to add additional styling.

11. What does the <Redirect /> component do?
    It'll navigate to another page, and the new page will override the current page in the history stack.