2001 React-Router-Prework.md

React Router Prework

This gist contains a short assignment I'd like everyone to complete before our formal lesson. The prework involves reading some of the React Router documentation, and will allow us to keep the lesson more hands on.

Instructions

1. Fork this gist
2. On your own copy, go through the listed readings and answer associated questions
3. Comment a link to your forked copy on the original gist

Questions / Readings

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?

• we need to run npm install react-router-dom to use the React Router package.

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

• This is a component that uses HTML 5's history API to keep our UI in sync with the URL

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

• This gives us the advantage of being able to use the browser's forward/back buttons, as well as use bookmarks to save specific paths of the application to visit at a later time.

Route Matchers

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

• Route is a component that holds a filepath and contains components that should be rendered when that filepath is matched.

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

• it check to see if its path prop is matched by the link that was clicked.

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

• The switch component contains multiple 's. renders the first child route or redirect that matches the location.

8. How does it decide what to render?

• It renders the first child route or redirect that matches the location.

Route Changers

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

• The link component provides accessible navigation around our app, by rendering links that contain routing paths.

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

• Navlink allows us to add styling to an 'active element' (such as an underline, or altered color when a user has clicked it.) When a User clicks on a Navlink, we can use styling to display that it is currently 'active'

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

• The redirect component will override a path based on a condition. The new location will override the current location in the call stack. For example, if you are trying to access a page that you can only access if logged in, it will trigger a set <Redirect /> that will remember where you were trying to go, but redirect you to the login page.