KBair React Router Prework.md

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?

npm install react-router-dom

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

A component installed with the router package that uses regular URL paths. It requires that the web server serves the same page at all URLs managed by the React Router. This is supported by the Create React App -- we can wrap our entire App component with this.

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

This allows us to specify our URL when the user navigates through the site, making the single page application function more like a website with multiple url paths. And allows a user to navigate the site using the forward and back buttons in the browser.

Route Matchers

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

The <Route /> component will render specified components if the file path matches the user's navigation, kind of like a different form of conditional rendering.

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

It compares the current URL path to the specified path in the component. If the url matches, it will rendered the specified app component.

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

The <Switch /> component will render the first present child Router component (either a <Route /> or <Redirect />) that has a matching URL path for the current location.

8. How does it decide what to render?

It renders only the first match it finds. NOTE: The url only matches the beginning of a URL not the entire thing, so a <Route path="/"> will always match the URL. Generally good practice to put the "/" path at the end of the <Switch> or use <Route exact path="/">

Route Changers

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

Creates a link in your application that can take the user to a specific URL path when they click it. Wherever you render a link component your HTML will automatically be updated to have an tag.

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

The <NavLink /> is a special type of the <Link> component that will add styling to the rendered element when the current URL matches the 'to' path defined in the tag.

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

It can force navigation to a specific path declared in its 'to' prop. The forced URL overrides the current location in the history which can complicate browser navigation.