reacttraining.com guides

Question 1

How do you install React Router?

Answer 1

npm install react-router-dom

Question 2

What are the three primary categories of components in React Router?

Answer 2

routers
route matchers
navigation

Question 3

What are examples of router components in React Router?

Answer 3

< BrowserRouter > and < HashRouter >

Question 4

What are examples of route matcher components in React Router?

Answer 4

< Route > and < Switch >

Question 5

What are examples of navigation components in React Router?

Answer 5

< Link >, < NavLink >, and < Redirect >

Question 6

How can navigation components be thought of?

Answer 6

As route changers.

Question 7

Where should all the components that you use in a web application be imported from?

Answer 7

react-router-dom.

Question 8

What is the core of every React Router application?

Answer 8

A router component.

Question 9

What’s the main difference in the way < BrowserRouter > and < HashRouter > store URL’s?

Answer 9

A < BrowserRouter > uses regular URL paths. These are generally the best-looking URLs.
A < HashRouter > stores the current location in the hash portion of the URL, so the URL looks something like http://example.com/#/your/page.

Question 10

What is a potential downside of using < BrowserRouter > in regards to the server?

Answer 10

They require your server to be configured correctly. Specifically, your web server needs to serve the same page at all URLs that are managed client-side by React Router. Create React App supports this out of the box in development, and comes with instructions on how to configure your production server as well.

Question 11

What is a potential advantage of using < HashRouter > in regards to the server?

Answer 11

Since the hash is never sent to the server, no special server configuration is needed.

Question 12

How do you use a router?

Answer 12

Just make sure it is rendered at the root of your element hierarchy. Typically you’ll wrap your top-level element in a router.

Question 13

What are the two route matching components?

Answer 13

Switch and Route.

Question 14

What happens when a < Switch > is rendered?

Answer 14

It searches through its children < Route > elements to find one whose path matches the current URL.

Question 15

What happens when a < Switch > finds a path matching the current URL?

Answer 15

It renders that < Route > and ignores all others. This means that you should put < Route >s with more specific (typically longer) paths before less-specific ones.

Question 16

What happens if no < Route > matches are found?

Answer 16

The < Switch > renders nothing (null).

Question 17

What is important to note regarding < Route path > matches?

Answer 17

That a < Route path > matches the beginning of the URL, not the whole thing. So a < Route path=”/” > will always match the URL. Because of this, we typically put this < Route > last in our < Switch >. Another possible solution is to use < Route exact path=”/” > which does match the entire URL.

Question 18

Split last question

Answer 18

qw

Question 19

What is the React Router < Link > component used for?

Answer 19

To create links in your application.

Question 20

What happens wherever you render a < Link > component?

Answer 20

An anchor (< a >) will be rendered in your HTML document.

Question 21

What is the < NavLink > component?

Answer 21

A special type of < Link >.

Question 22

What can the < NavLink > component do?

Answer 22

Style itself as “active” when its to prop matches the current location.

Question 23

What do you do if you want to force navigation?

Answer 23

Render a < Redirect >.

Question 24

When happens when a < Redirect > renders?

Answer 24

It will navigate using its to prop.

Question 25

Give a simple example of using a < NavLink > component.

Answer 25

< Link to="/" >Home< /Link >
// < a href="/" >Home< /a >
< NavLink to="/react" activeClassName="hurray" >
  React
< /NavLink >

// When the URL is /react, this renders:
// < a href="/react" className="hurray" >React< /a >

// When it's something else:
// < a href="/react" >React< /a >
< Redirect to="/login" / >

Question 26

Why is rendering on the server is a bit different than on the front end?

Answer 26

Because the server is all stateless.

Question 27

What is the basic idea of React Router rendering on the server??

Answer 27

We wrap the app in a stateless < StaticRouter > instead of a < BrowserRouter >. We pass in the requested url from the server so the routes can match and a context prop.

Question 28

What happens when you render a < Redirect > on the client?

Answer 28

The browser history changes state and we get the new screen.

Question 29

Are you able to change the apps state in a static server environment?

Answer 29

No.