Framework

Question 1

Where are routes defined in React Router v7 framework mode?

Answer 1

In app/routes.ts

Question 2

What are the two essential elements needed for each route definition?

Answer 2

URL pattern and file path to route module

Question 3

How is type safety enforced in route configurations?

Answer 3

Using TypeScript with satisfies RouteConfig

Question 4

What function creates a standard route in React Router v7?

Answer 4

route(path, modulePath)

Question 5

What function creates a default route for a parent URL?

Answer 5

index(modulePath)

Question 6

What function creates a wrapper without adding a URL segment?

Answer 6

layout(modulePath, children)

Question 7

How do you add a path prefix to a group of routes?

Answer 7

prefix(path, routes)

Question 8

How are child routes rendered within parent routes?

Answer 8

Through the <Outlet/> component in the parent

Question 9

What special file are all routes nested inside?

Answer 9

app/root.tsx

Question 10

What URL structure does route nesting create?

Answer 10

Hierarchical URL structure (e.g., /dashboard/settings)

Question 11

What is an index route?

Answer 11

Default child route rendered at the parent’s URL path

Question 12

How do you define an index route?

Answer 12

index("./home.tsx")

Question 13

What is a layout route?

Answer 13

A route that provides UI structure without adding a URL segment

Question 14

How do you define a dynamic segment in a route path?

Answer 14

With a colon prefix (:) - route("teams/:teamId")

Question 15

How do you define an optional segment in a route path?

Answer 15

With a question mark suffix (?) - route(":lang?/categories")

Question 16

What is a splat/catchall route?

Answer 16

A route that matches the remaining URL with /* - route("files/*")

Question 17

What are the three main capabilities of route modules?

Answer 17

Code-splitting, data loading, and error handling

Question 18

What is the purpose of the default export in a route module?

Answer 18

Component rendered when the route matches

Question 19

What is the difference between loader and clientLoader?

Answer 19

loader runs on server, clientLoader runs only in browser

Question 20

What is the difference between action and clientAction?

Answer 20

action handles server-side mutations, clientAction handles browser-only mutations

Question 21

What component handles errors in a route module?

Answer 21

ErrorBoundary

Question 22

What component displays during client loading?

Answer 22

HydrateFallback

Question 23

What export controls when to refresh data?

Answer 23

shouldRevalidate

Question 24

What prop provides access to data from loader/clientLoader?

Answer 24

loaderData

Question 25

What prop provides access to data from action/clientAction?

Answer 25

`actionData`

Question 26

What prop contains URL parameters from dynamic segments?

Answer 26

`params`

Question 27

What prop provides all matches in the current route tree?

Answer 27

`matches`

Question 28

How do you disable Server-Side Rendering (SSR) in React Router v7?

Answer 28

Set `ssr: false` in config

Question 29

How do you define URLs for static pre-rendering?

Answer 29

Use `async prerender()` function returning URL array

Question 30

How can you access server data in a clientLoader?

Answer 30

Use `serverLoader()` function

Question 31

What component shows while clientLoader data is loading?

Answer 31

`HydrateFallback`

Question 32

What are the benefits of combining `loader` and `clientLoader`?

Answer 32

Enables hybrid data strategies with both server and client data

Question 33

What are the three ways to call actions in React Router v7?

Answer 33

Form-based (`

`), imperative (`useSubmit()`), and fetcher-based (`useFetcher()`)

Question 34

Which method of calling actions does not cause navigation?

Answer 34

Fetcher-based (`useFetcher()`)

Question 35

What component provides navigation with active states?

Answer 35

``

Question 36

How do you perform programmatic navigation in loaders/actions?

Answer 36

`redirect("/path")`

Question 37

What hook enables programmatic navigation in components?

Answer 37

`useNavigate()`

Question 38

What hook exposes global navigation state?

Answer 38

`useNavigation()`

Question 39

How do you track the state of an independent form submission?

Answer 39

With `fetcher.state`

Question 40

How can you implement optimistic UI updates?

Answer 40

Use `fetcher.formData` to predict future state before server response