0
# @remix-run/react
1
2
@remix-run/react provides React DOM bindings for the Remix web framework, enabling developers to build full-stack web applications with React that focus on user interface and web fundamentals. It offers seamless integration with React Router for routing, includes components and hooks for data loading, form handling, navigation, and error boundaries, and provides client-server communication through loaders and actions.
3
4
## Package Information
5
6
- **Package Name**: @remix-run/react
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @remix-run/react`
10
11
## Core Imports
12
13
```typescript
14
import {
15
RemixBrowser,
16
RemixServer,
17
Form,
18
Link,
19
useLoaderData,
20
useFetcher,
21
Meta,
22
Links,
23
Scripts
24
} from "@remix-run/react";
25
```
26
27
For CommonJS:
28
29
```javascript
30
const {
31
RemixBrowser,
32
RemixServer,
33
Form,
34
Link,
35
useLoaderData,
36
useFetcher,
37
Meta,
38
Links,
39
Scripts
40
} = require("@remix-run/react");
41
```
42
43
## Basic Usage
44
45
### Client-Side Application
46
47
```typescript
48
import { RemixBrowser } from "@remix-run/react";
49
import { hydrateRoot } from "react-dom/client";
50
51
hydrateRoot(document, <RemixBrowser />);
52
```
53
54
### Server-Side Application
55
56
```typescript
57
import { RemixServer } from "@remix-run/react";
58
import type { EntryContext } from "@remix-run/react";
59
60
export default function handleRequest(
61
request: Request,
62
responseStatusCode: number,
63
responseHeaders: Headers,
64
remixContext: EntryContext
65
) {
66
return new Response(
67
renderToString(
68
<RemixServer context={remixContext} url={request.url} />
69
),
70
{
71
headers: { "Content-Type": "text/html" },
72
status: responseStatusCode,
73
}
74
);
75
}
76
```
77
78
### Route Component with Data Loading
79
80
```typescript
81
import { useLoaderData, Form } from "@remix-run/react";
82
import type { LoaderFunctionArgs } from "@remix-run/node";
83
84
export async function loader({ params }: LoaderFunctionArgs) {
85
return { user: await getUser(params.userId) };
86
}
87
88
export default function UserRoute() {
89
const { user } = useLoaderData<typeof loader>();
90
91
return (
92
<div>
93
<h1>{user.name}</h1>
94
<Form method="post">
95
<button type="submit">Update</button>
96
</Form>
97
</div>
98
);
99
}
100
```
101
102
## Architecture
103
104
@remix-run/react is structured around several key architectural components:
105
106
- **Application Components**: `RemixBrowser` and `RemixServer` provide the main entry points for client and server rendering
107
- **React Router Integration**: Re-exports routing components and hooks from react-router-dom for navigation and route matching
108
- **Document Components**: `Meta`, `Links`, and `Scripts` manage the HTML document head and script loading
109
- **Enhanced Form Handling**: `Form` component with progressive enhancement and server-side processing
110
- **Data Loading System**: Hooks like `useLoaderData`, `useActionData`, and `useFetcher` for server-client data communication
111
- **Navigation Components**: Enhanced `Link` and `NavLink` with prefetching capabilities
112
- **Error Boundaries**: Built-in error handling with `RemixErrorBoundary` and error response utilities
113
114
## Capabilities
115
116
### Application Entry Points
117
118
Core components for initializing Remix applications on both client and server sides.
119
120
```typescript { .api }
121
function RemixBrowser(props: RemixBrowserProps): ReactElement;
122
123
function RemixServer(props: RemixServerProps): ReactElement;
124
125
interface RemixBrowserProps {
126
basename?: string;
127
}
128
129
interface RemixServerProps {
130
context: EntryContext;
131
url: string | URL;
132
abortDelay?: number;
133
nonce?: string;
134
}
135
```
136
137
[Application Entry Points](./application-entry-points.md)
138
139
### Document Components
140
141
Components for managing HTML document structure including meta tags, stylesheets, and scripts.
142
143
```typescript { .api }
144
function Meta(): ReactElement;
145
function Links(): ReactElement;
146
function Scripts(props?: ScriptProps): ReactElement;
147
function ScrollRestoration(props?: ScrollRestorationProps): ReactElement;
148
```
149
150
[Document Components](./document-components.md)
151
152
### Forms and Navigation
153
154
Enhanced form handling and navigation components with progressive enhancement and prefetching capabilities.
155
156
```typescript { .api }
157
function Form(props: RemixFormProps): ReactElement;
158
function Link(props: RemixLinkProps): ReactElement;
159
function NavLink(props: RemixNavLinkProps): ReactElement;
160
161
interface RemixFormProps extends FormProps {
162
preventScrollReset?: boolean;
163
replace?: boolean;
164
reloadDocument?: boolean;
165
navigate?: boolean;
166
}
167
```
168
169
[Forms and Navigation](./forms-and-navigation.md)
170
171
### Data Loading Hooks
172
173
Hooks for accessing server-loaded data, handling form submissions, and managing client-server communication.
174
175
```typescript { .api }
176
function useLoaderData<T = unknown>(): SerializeFrom<T>;
177
function useActionData<T = unknown>(): SerializeFrom<T> | undefined;
178
function useRouteLoaderData<T = unknown>(routeId: string): SerializeFrom<T> | undefined;
179
function useFetcher<T = unknown>(opts?: FetcherOptions): FetcherWithComponents<T>;
180
function useMatches(): UIMatch[];
181
```
182
183
[Data Loading Hooks](./data-loading-hooks.md)
184
185
### React Router Re-exports
186
187
Complete re-export of React Router components, hooks, and utilities for routing functionality.
188
189
```typescript { .api }
190
// Navigation Components
191
function Navigate(props: NavigateProps): ReactElement;
192
function Outlet(props?: OutletProps): ReactElement;
193
function Routes(props: RoutesProps): ReactElement;
194
function Route(props: RouteProps): ReactElement;
195
196
// Navigation Hooks
197
function useNavigate(): NavigateFunction;
198
function useLocation(): Location;
199
function useParams<K extends string = string>(): Readonly<Params<K>>;
200
function useSearchParams(): [URLSearchParams, SetURLSearchParams];
201
function useBeforeUnload(callback: (event: BeforeUnloadEvent) => void): void;
202
function useFormAction(): string;
203
function useHref(to: To, options?: { relative?: RelativeRoutingType }): string;
204
function useLinkClickHandler<E extends Element = HTMLAnchorElement>(to: To, options?: { target?: React.HTMLAttributeAnchorTarget; replace?: boolean; state?: any; preventScrollReset?: boolean; relative?: RelativeRoutingType }): (event: React.MouseEvent<E, MouseEvent>) => void;
205
function useSubmit(): SubmitFunction;
206
function useBlocker(blocker: BlockerFunction): Blocker;
207
function useViewTransitionState(to: To, opts?: { relative?: RelativeRoutingType }): boolean;
208
function unstable_usePrompt(message: string | boolean): void;
209
210
// Async Data Hooks
211
function useAsyncError(): Error | undefined;
212
function useAsyncValue<T = unknown>(): T;
213
214
// Additional React Router Hooks
215
function useFetchers(): Fetcher[];
216
function useMatch(pattern: PathPattern | string): PathMatch | null;
217
function useOutlet(context?: unknown): React.ReactElement | null;
218
function useOutletContext<Context = unknown>(): Context;
219
function useResolvedPath(to: To, options?: { relative?: RelativeRoutingType }): Path;
220
function useRevalidator(): { revalidate(): void; state: "idle" | "loading" };
221
function useRouteError(): unknown;
222
function useRoutes(routes: RouteObject[], locationArg?: Partial<Location> | string): React.ReactElement | null;
223
function useInRouterContext(): boolean;
224
function useNavigationType(): NavigationType;
225
226
// Utility Functions
227
function isRouteErrorResponse(error: any): error is ErrorResponse;
228
```
229
230
[React Router Integration](./react-router-integration.md)
231
232
### Data Response Utilities
233
234
Server runtime utilities for creating responses, redirects, and handling deferred data.
235
236
```typescript { .api }
237
function json<Data>(data: Data, init?: ResponseInit): Response;
238
function defer<Data extends Record<string, unknown>>(data: Data, init?: ResponseInit): Response;
239
function redirect(url: string, init?: ResponseInit): Response;
240
function redirectDocument(url: string, init?: ResponseInit): Response;
241
function replace(url: string, init?: ResponseInit): Response;
242
```
243
244
[Data Response Utilities](./data-response-utilities.md)
245
246
### Type Definitions
247
248
Comprehensive type definitions for route modules, component props, and framework integration.
249
250
```typescript { .api }
251
// Route Module Types
252
type ClientLoaderFunction = (args: ClientLoaderFunctionArgs) => ReturnType<LoaderFunction>;
253
type ClientActionFunction = (args: ClientActionFunctionArgs) => ReturnType<ActionFunction>;
254
type MetaFunction = (args: MetaArgs) => MetaDescriptor[];
255
256
// Component Types
257
interface HtmlLinkDescriptor {
258
rel: string;
259
href?: string;
260
type?: string;
261
media?: string;
262
integrity?: string;
263
crossOrigin?: "anonymous" | "use-credentials";
264
}
265
```
266
267
[Type Definitions](./type-definitions.md)
268
269
## Error Handling
270
271
```typescript { .api }
272
function isRouteErrorResponse(error: any): error is ErrorResponse;
273
274
interface ErrorResponse {
275
status: number;
276
statusText: string;
277
data: any;
278
}
279
```
280
281
Remix provides built-in error boundaries and utilities for handling route-level errors, including server errors, not found errors, and client-side errors.