React Router Flashcards
What package do you need to install to use React Router?
react-router-dom
What does the Switch component do?
It allows us to switch between routes. It goes through all the routes, and if one matches the link that’s being called, it renders the component found inside that route.
What do you do inside the Switch component to handle cases where there’s no match for the route that’s being called?
Specify a default route.
How do you define routes inside the Switch component?
By using the Route component.
What two properties do you need to declare a new route?
Two properties: path and component.
What does ‘exact’ do when used in a Route?
It tells the system that we need to have the exact path specified or it’s not going to work.
What is the Link component?
It’s an alternative to the ‘a’ tag that doesn’t trigger a full-page refresh. It should always be used for in-site navigation.
What do you do to pass props into a component that’s being used in a Route?
Use the ‘render’ prop instead of ‘component’.
What’s the difference between the ‘render’ and the ‘component’ props for a Route?
The render prop takes in a function that takes in props and returns a new component, allowing us to send props to the component that’s being called.
The component prop on the other hand takes in a component name variable and uses that component with no props.
How do you pass a url parameter to a component that’s being used in a Route?
Inside the Route’s path prop, you declare the URL parameter using columns such as ‘:id’ in ‘producs/:id’.
Then, you use the render prop. Render prop takes in a function that takes in a props argument and returns a component.
You extract the URL parameter from this props object and use it for the component you’re intending to return.
By default, what happens if a user enters a URL that doesn’t match any of our Routes?
No component gets rendered. They navigate to a blank page.
How do you handle the case of the user entering a URL that doesn’t match any of the Routes?
In the Switch component, you create a Route that’s placed after every other route and you specify no path for it.
