2001 React-Router-Prework.md

React Router Prework

Questions / Readings

Router Overview

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 i 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 router that uses an API to keep our custom URL paths and UI in sync

4. Why would we use <BrowserRouter /> in our apps? We can control and keep track of the User / app behavior when moving between pages

Route Matchers

5. What does the <Route /> component do? It matches the UI to the current URL. Basically this is what we've been using states to set a "page view" to do.

6. How does the <Route /> component check whether it should render something? It uses props (location, history, and match) to compare the current location against matching locations and render those components which match.

7. What does the <Switch /> component do? Switch allows us to render a singlular child of a Route component instead of each item - so if my About page has a poster and a description but there's an error, I may not want to leave the About path but I may only want to render an error message without the other components on the /about path

8. How does it decide what to render? It only renders it's child with a matching path.

Route Changers

9. What does the <Link /> component do? How does a user interact with it? Links render that the user can see and click (so if I right-click and copy a buttons url it will copy the path the button directs to). A user can use these elements to travel through different paths of Router to different locations in the App.

10. What does the <NavLink /> component do? How does a user interact with it? It has the same behavior and functionality as <Link /> but also has styling elements which change when it's path has been selected.

11. What does the <Redirect /> component do? Redirect can exit the path it's on and even go to other sites by overriding the current location.