React Router Flashcards
What does React Router enable?
React Router enables client-side routing for single-page applications (SPAs).
What is a “dynamic segment” in React Router?
A dynamic segment in React Router is a part of the URL path that starts with : and captures a variable value. For example, in <Route></Route>, :projectId and :taskId are dynamic segments.
How can you provide data to a route element before it renders in React Router?
You can define a “loader” function for each route to provide data, and that data is made available to your components through useLoaderData.
What are route actions in React Router, and when are they called?
Route actions are functions used to perform data mutations when an app sends non-GET submissions (e.g., “post,” “put,” “patch,” “delete”) to a route. They are called when these submissions occur.
How do you access dynamic parameters from the current URL in React Router?
You can use the useParams hook to obtain an object containing key-value pairs of the dynamic parameters from the current URL that match the route’s path.
What is a <NavLink> in React Router, and what makes it special?</NavLink>
A <NavLink> in React Router is a specialized version of <Link. It's aware of whether it is "active" or "pending," making it useful for building navigation menus like breadcrumbs or tabs to highlight the currently selected item.</NavLink>
When should you use redirect in React Router, and when should you use useNavigate?
You should use redirect in route loaders and actions when a redirect is in response to data. useNavigate is typically used within components to trigger programmatic navigation.
What does the useNavigate hook return in React Router?
The useNavigate hook returns a function that allows you to navigate programmatically within your React Router application.
What is “Suspense” in the context of React Router?
Suspense in React Router is a feature that allows you to declaratively specify loading states and fallback UI while data is being loaded for a route.
How do you specify where the child routes should be rendered in the root route in React Router?
You specify where child routes should be rendered in the root route by using the <Outlet> component.</Outlet>
How does React Router handle form data compared to traditional server requests?
React Router serializes form data and uses client-side routing to send it to a route action, rather than sending it to the server as a traditional request.
What happens when a POST action of a route is called in React Router?
When a POST action of a route is called, React Router recognizes that data has changed, and all useLoaderData hooks will automatically update.
Can loaders and actions in React Router return a Response?
Yes, both loaders and actions in React Router can return a Response, which allows for handling server responses and data retrieval.
What is the purpose of “revalidation” in React Router?
The purpose of “revalidation” in React Router is to update the data on a page after an action redirects. This process calls all the loaders for the data to obtain the latest values, and useLoaderData returns new values, causing components to update.
How can you navigate back one step in the route navigation in React Router?
To go back one step in the route navigation in React Router, you can use the useNavigate(-1) function.
