Framework Flashcards
Where are routes defined in React Router v7 framework mode?
In app/routes.ts
What are the two essential elements needed for each route definition?
URL pattern and file path to route module
How is type safety enforced in route configurations?
Using TypeScript with satisfies RouteConfig
What function creates a standard route in React Router v7?
route(path, modulePath)
What function creates a default route for a parent URL?
index(modulePath)
What function creates a wrapper without adding a URL segment?
layout(modulePath, children)
How do you add a path prefix to a group of routes?
prefix(path, routes)
How are child routes rendered within parent routes?
Through the <Outlet/> component in the parent
What special file are all routes nested inside?
app/root.tsx
What URL structure does route nesting create?
Hierarchical URL structure (e.g., /dashboard/settings)
What is an index route?
Default child route rendered at the parent’s URL path
How do you define an index route?
index("./home.tsx")
What is a layout route?
A route that provides UI structure without adding a URL segment
How do you define a dynamic segment in a route path?
With a colon prefix (:) - route("teams/:teamId")
How do you define an optional segment in a route path?
With a question mark suffix (?) - route(":lang?/categories")
What is a splat/catchall route?
A route that matches the remaining URL with /* - route("files/*")
What are the three main capabilities of route modules?
Code-splitting, data loading, and error handling
What is the purpose of the default export in a route module?
Component rendered when the route matches
What is the difference between loader and clientLoader?
loader runs on server, clientLoader runs only in browser
What is the difference between action and clientAction?
action handles server-side mutations, clientAction handles browser-only mutations
What component handles errors in a route module?
ErrorBoundary
What component displays during client loading?
HydrateFallback
What export controls when to refresh data?
shouldRevalidate
What prop provides access to data from loader/clientLoader?
loaderData
What prop provides access to data from action/clientAction?
actionData
What prop contains URL parameters from dynamic segments?
params
What prop provides all matches in the current route tree?
matches
How do you disable Server-Side Rendering (SSR) in React Router v7?
Set ssr: false in config
How do you define URLs for static pre-rendering?
Use async prerender() function returning URL array
How can you access server data in a clientLoader?
Use serverLoader() function
What component shows while clientLoader data is loading?
HydrateFallback
What are the benefits of combining loader and clientLoader?
Enables hybrid data strategies with both server and client data
What are the three ways to call actions in React Router v7?
Form-based (<Form>), imperative (useSubmit()), and fetcher-based (useFetcher())
Which method of calling actions does not cause navigation?
Fetcher-based (useFetcher())
What component provides navigation with active states?
<NavLink to="/path">
How do you perform programmatic navigation in loaders/actions?
redirect("/path")
What hook enables programmatic navigation in components?
useNavigate()
What hook exposes global navigation state?
useNavigation()
How do you track the state of an independent form submission?
With fetcher.state
How can you implement optimistic UI updates?
Use fetcher.formData to predict future state before server response
