5) Master Project: React Router and Routing

Question 1

react router mimics ___.

Answer 1

url functionality

Question 2

what is the most supported/popular react router library?

Answer 2

React Router DOM

Question 3

What file does the import statement for BrowserRouter component go in? what is that statement?

Answer 3

index.js

import { BrowserRouter } from ‘react-router-dom’;

Question 4

What do you do with the Browser Router component once it has been imported?

Answer 4

wrapping around the app component in the index.js file.

Question 5

What are the three main attributes of the Router component?

Answer 5

• exact: whether the path has to match exactly, default value is true
• path: the path (url) that will be trigger to rendering the component
• component: the component that we want the route to render

Question 6

What is the switch component used for?

Answer 6

wraps around route components and only renders the first one that matches

Question 7

What two main components will we be using from the routing library?

Answer 7

Switch and Route

Question 8

What 3 props get passed into the component identified in a router component?

Answer 8

history

location

match

Question 9

what is the match prop useful for?

Answer 9

accessing dynamically chaging data

Question 10

What react-router-DOM component replaces the a-tag? what are its attributes? what is the drawback?

Answer 10

Link

to=’url’

not dynamic

Question 11

What is the dynamic version of using the Link component?

Answer 11

using the history prop in an event triggered call back function in a regular component (like a button):

onClick={() => props.history.push(‘/topics’)}

Question 12

The match prop allows our components to build out …

Answer 12

a nested route structure

Question 13

what is prop tunneling and why is it an issue?

Answer 13

sending props through child components, the components in the middle wont need the props.

Question 14

What is a higher order component?

Answer 14

a function that takes a component as an argument and returns a modified component.

Question 15

how do you use the withRouter() function on a component? what features does this give that component?

Answer 15

in the export statement wrap the component with the function.

gives us the history property

Question 16

what is a shortcut for passing props into a component when the keys and value variables have the same name? [CODE ANSWER]

Answer 16