React Router Flashcards
What is Server-Side Routing?
Traditional routing is “Server Side routing”.
Clicking a <a> link causes browser to request a new page and replace entire DOM.
Server decides what HTML to return based on URL requested, entire page refreshes. </a>
What is Client-Side Routing?
Handles the mapping between URL bar and the content a user sees via browser rather than a server. We use JavaScript to manipulate the URL bar with a web API called History.
Extra info: We can display different information to the user based off of the url even if they never leave the page. The page never refreshes. We don’t get different URL as we move around pages.
How would we define a route with the path and component props?
We do and we pass in a path prop which takes a url where we want to map a component to. It also takes a component prop where we pass in the component we visit /dog we want to see the dog component in this div.
<div>
</div>
If in our App component we create multiple route what happens when we go to each individual one?
They’ll stack on top of the root component. So at first he has the About component showing on the site. When he types in /dog it shows up right under that. If we do /contact then /dog will go away and contact will appear beneath about.
React loves matching as many things as possible. We have multiple / at the start so the routes get matched.
Switch is the answer to this.
What is switch?
We import it alongside Route at the top
import { Route, Switch } from “react-router-dom”
We wrap around the and it’ll make sure that only one of these routes matches. It’s like a switch statement in JavaScript where one thing is being compared to multiple conditions and one of them is going to be true.
So only one of these components will show up for us, whichever path is matched first. ORDER DOES MATTER.
What is exact?
A prop within Route that only does the matching if it exactly matches the path.
Just
He says he also uses a switch still with this because we usually only want one thing to render one component to show up per route. We don’t usually match routes.
Explain the Link Component
It comes with React Router and acts as a replacement for the <a> tags. Instead of an href attribute, Link uses a to prop. Clicking on a link doesn’t issue a get request(refreshing of the page). JS intercepts the click and does client-side routing. Must be imported with Route and Switch.</a>
This is how you give your user a way to change the content to view another route. Used all the time. </a>
What is the NavLink component?
Also used all the time and is just like the link with one additional feature. Can style the anchor tags selectively based off of which ones are active.
Pass in a prop called activeClassName.
About
This will match again which is that react router matches routes and we can fix that by doing the same thing as before which is adding exact.
About
Component is one way of specifying what content/component we want rendered given a certain path. Explain these two types(component and render).
Component way(Not the ideal): Pass a function into component and that function will return a jsx component. We can also pass in props to this too. This will keep making a new component rather than making a new one and that’s a problem. With the lifecycle methods we see this
} />
render: Replace component with render. With the lifecycle methods we see that it’s being re rendered rather than mounted/unmounted repeatedly like the component version was.
} />
Which to use? He says he likes to use component if he’s not passing any props. If passing props in then he likes render.
