React Router Prework

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?

• 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 that helps keep your UI in sync with the URL/path as the user traverses the app. It uses the HTML5 history API (and the pushState, replaceState, and popstate events)

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

• It would be a really bad user experience if the navigation of the site was disorderly or moving back or forward in the navigation didn't take them where they expect. I'm still learning how <BrowerRouter /> helps with user navigation, but if it helps with what I think it helps with (browser/route history) it seems like it could be very useful.

Route Matchers

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

• it's most basic job is to render some user interface component when its path matches the current url. It can handle the showing and hiding of components based on the route path they are the children of.

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

• it checks the path of the url and it's path. there is a path prop or attribute (not sure what the technical term is in this case) that will have the path of the components it should render. those components will be inside its opening and closing <Route > tag. opening example 1: <Route exact path="/"> closing example 1: </Route>

• opening example 2: <Route path="/news"> closing example 2: </Route>

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

• it renders the first child <Route> or <Redirect> that matches the path/location. THis is different than the Routes because it will render only the first. Route would render all the components that matched the path
• the docs describe <Switch /> as rendering exclusively and <Route> rendering inclusively

8. How does it decide what to render?

• it's based on the url, it matches it to a route and displays only the first Route that matches the url

Route Changers

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

• creates links?? the user can probably click on them??? It seems like you can create a search with a link
• an anchor tag is rendered in your UI

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

• it's very similar to the Link component but with styling. It can style itself as "active" when its to prop matches the current location.

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

• The redirect component will navigate to a new location when it is rendered. A nice example in the docs was (in plain language) if a user is logged in, Redirect to the dashboard, otherwise go to the public home page.