Go on. Explore!

lvl 0 • 0 xp

lvl 1

Home Market Decks Interests

React Router

memorize.ai (lvl 286)

(0)

22 cards

()

Section 1

Preview this deck

an anchor (<a>)

Front

1 / 22

Web Dev

0.0

0 reviews

5			0
4			0
3			0
2			0
1			0

Active users

All-time users

Favorites

Last updated

6 years ago

Date created

Mar 1, 2020

Cards (22)

Section 1

(22 cards)

an anchor (<a>)

Front

What HTML tag is rendered in your application's HTML wherever you render a <Link>?

Back

<Switch>

Front

The ________________ component is used to group <Routes>s together.

Back

when you want to use a function to pass in-scope variables because you will get undesired component unmounts/remounts.

Front

When should you NOT use the component prop with the <Route> component?

Back

router components, route matching components, and navigation components

Front

What are the three types of components in React Router?

Back

<Route>

Front

When a _____________ matches it will render its content and when it does not match, it will render null. One with no path will always match.

Back

<BrowserRouter>

Front

Generally speaking, if you have a server that responds to requests which routing tag should be used to wrap your outermost application component?

Back

<NavLink>

Front

The _______________ is a special type of <Link> that can style itself as "active" when its 'to' prop matches the current location.

Back

1. They are not SEO (Search Engine Optimization) friendly (HTML is mostly rendered through JS. Search engine crawlers are unable to see what gets rendered) 2. Slow initial loading time.(Have to wait until the JS gets loaded before the JS renders HTML)

Front

What are 2 major problems with single page apps?

Back

react-router-dom

Front

What npm package do you install in order to use React Router?

Back

when you have an existing component and don't need to pass props

Front

When should the component prop be used with the <Route> component?

Back

1. UX is improved because the website doesn't have to constantly reload itself 2. The server's loading will be freed up as most of the rendering work is moved client-side (end user's browser) 3. Development is much easier as the server and client now share an API (your front end app is self-contained and maintenance is easier)

Front

What are the advantages of SPAs?

Back

<Redirect>

Front

Any time that you want to force navigation, you can render a _________________. When it renders, it will navigate using its 'to' prop.

Back

It allows websites to function as independent apps which communicate with servers through APIs.

Front

What is the benefit of a single page application?

Back

<Route> and <Switch>

Front

What are the two route matching components included with React Router?

Back

<Switch>

Front

The _________ component iterates over all of its children <Route> elements and only renders the first one that matches the current location.

Back

<Link> and <NavLink>

Front

What component does React Router provide for creating links in your application?

Back

lazy loading or code splitting.

Front

________________________________ is a technique of downloading only what you need from the server and only downloading code not needed right now for when it is needed.

Back

when you have to pass in-scope variables to the component you want to render.

Front

When should the render prop be used with the <Route> component?

Back

Route matching

Front

____________________________ is done by comparing a <Route>'s path prop to the current location's pathname.

Back

<BrowserRouter>

Front

The ___________ component is a specialized <Router> that uses the HTML5 history API (pushState, replaceState, and the popState) to keep your UI in sync with the URL.

Back

component and render

Front

___ and _ are the two prop choices which are almost always used with <Route> for rendering components.

Back

dynamic routing

Front

A type of routing that takes place as your app is rendering, not in a configuration or convention outside of a running app.

Back

React Router

Preview this deck

an anchor (<a>)

0.0

Cards (22)

an anchor (<a>)

What HTML tag is rendered in your application's HTML wherever you render a <Link>?

<Switch>

The ________________ component is used to group <Routes>s together.

when you want to use a function to pass in-scope variables because you will get undesired component unmounts/remounts.

When should you NOT use the component prop with the <Route> component?

router components, route matching components, and navigation components

What are the three types of components in React Router?

<Route>

When a _____________ matches it will render its content and when it does not match, it will render null. One with no path will always match.

<BrowserRouter>

Generally speaking, if you have a server that responds to requests which routing tag should be used to wrap your outermost application component?

<NavLink>

The _______________ is a special type of <Link> that can style itself as "active" when its 'to' prop matches the current location.

1. They are not SEO (Search Engine Optimization) friendly (HTML is mostly rendered through JS. Search engine crawlers are unable to see what gets rendered) 2. Slow initial loading time.(Have to wait until the JS gets loaded before the JS renders HTML)

What are 2 major problems with single page apps?

react-router-dom

What npm package do you install in order to use React Router?

when you have an existing component and don't need to pass props

When should the component prop be used with the <Route> component?

What are the advantages of SPAs?

<Redirect>

Any time that you want to force navigation, you can render a _________________. When it renders, it will navigate using its 'to' prop.

It allows websites to function as independent apps which communicate with servers through APIs.

What is the benefit of a single page application?

<Route> and <Switch>

What are the two route matching components included with React Router?

<Switch>

The _________ component iterates over all of its children <Route> elements and only renders the first one that matches the current location.

<Link> and <NavLink>

What component does React Router provide for creating links in your application?

lazy loading or code splitting.

________________________________ is a technique of downloading only what you need from the server and only downloading code not needed right now for when it is needed.

when you have to pass in-scope variables to the component you want to render.

When should the render prop be used with the <Route> component?

Route matching

____________________________ is done by comparing a <Route>'s path prop to the current location's pathname.

<BrowserRouter>

The ___________ component is a specialized <Router> that uses the HTML5 history API (pushState, replaceState, and the popState) to keep your UI in sync with the URL.

component and render

_______________ and _____________ are the two prop choices which are almost always used with <Route> for rendering components.

dynamic routing

A type of routing that takes place as your app is rendering, not in a configuration or convention outside of a running app.

___ and _ are the two prop choices which are almost always used with <Route> for rendering components.