reacttraining.com guides Flashcards
How do you install React Router?
npm install react-router-dom
What are the three primary categories of components in React Router?
routers
route matchers
navigation
What are examples of router components in React Router?
< BrowserRouter > and < HashRouter >
What are examples of route matcher components in React Router?
< Route > and < Switch >
What are examples of navigation components in React Router?
< Link >, < NavLink >, and < Redirect >
How can navigation components be thought of?
As route changers.
Where should all the components that you use in a web application be imported from?
react-router-dom.
What is the core of every React Router application?
A router component.
What’s the main difference in the way < BrowserRouter > and < HashRouter > store URL’s?
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.
What is a potential downside of using < BrowserRouter > in regards to the server?
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.
What is a potential advantage of using < HashRouter > in regards to the server?
Since the hash is never sent to the server, no special server configuration is needed.
How do you use a router?
Just make sure it is rendered at the root of your element hierarchy. Typically you’ll wrap your top-level element in a router.
What are the two route matching components?
Switch and Route.
What happens when a < Switch > is rendered?
It searches through its children < Route > elements to find one whose path matches the current URL.
What happens when a < Switch > finds a path matching the current URL?
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.
What happens if no < Route > matches are found?
The < Switch > renders nothing (null).
What is important to note regarding < Route path > matches?
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.
Split last question
qw
What is the React Router < Link > component used for?
To create links in your application.
What happens wherever you render a < Link > component?
An anchor (< a >) will be rendered in your HTML document.
What is the < NavLink > component?
A special type of < Link >.
What can the < NavLink > component do?
Style itself as “active” when its to prop matches the current location.
What do you do if you want to force navigation?
Render a < Redirect >.
When happens when a < Redirect > renders?
It will navigate using its to prop.
Give a simple example of using a < NavLink > component.
< 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" / >
Why is rendering on the server is a bit different than on the front end?
Because the server is all stateless.
What is the basic idea of React Router rendering on the server??
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.
What happens when you render a < Redirect > on the client?
The browser history changes state and we get the new screen.
Are you able to change the apps state in a static server environment?
No.
