0
# React Router Components
1

2
Complete re-export of React Router components for building declarative route structures in React Native applications. These components provide the core routing functionality inherited from React Router.
3

4
## Capabilities
5

6
### MemoryRouter
7

8
A `<Router>` that keeps the history of your "URL" in memory (does not read or write to the address bar). Useful for tests and non-browser environments like React Native.
9

10
```typescript { .api }
11
/**
12
 * A Router that keeps history in memory
13
 * Ideal for React Native and testing environments
14
 * @param props - Router configuration
15
 * @returns JSX.Element router component
16
 */
17
interface MemoryRouterProps {
18
  basename?: string;
19
  children?: React.ReactNode;
20
  initialEntries?: InitialEntry[];
21
  initialIndex?: number;
22
  future?: Partial<FutureConfig>;
23
}
24

25
function MemoryRouter(props: MemoryRouterProps): JSX.Element;
26
```
27

28
### Routes
29

30
A container for a nested tree of `<Route>` elements that renders the branch that best matches the current location.
31

32
```typescript { .api }
33
/**
34
 * Container for nested Route elements
35
 * Renders the best matching route branch
36
 * @param props - Routes configuration
37
 * @returns JSX.Element routes container
38
 */
39
interface RoutesProps {
40
  children?: React.ReactNode;
41
  location?: Partial<Location> | string;
42
}
43

44
function Routes(props: RoutesProps): JSX.Element;
45
```
46

47
### Route
48

49
Declares an element that should be rendered at a certain URL path. Routes can be nested to create route hierarchies.
50

51
```typescript { .api }
52
/**
53
 * Declares an element to render at a specific path
54
 * Can be nested for hierarchical routing
55
 * @param props - Route configuration
56
 * @returns JSX.Element route element
57
 */
58
interface RouteProps {
59
  caseSensitive?: boolean;
60
  children?: React.ReactNode;
61
  element?: React.ReactNode | null;
62
  index?: boolean;
63
  path?: string;
64
  loader?: LoaderFunction;
65
  action?: ActionFunction;
66
  errorElement?: React.ReactNode | null;
67
  shouldRevalidate?: ShouldRevalidateFunction;
68
  handle?: RouteHandle;
69
  lazy?: LazyRouteFunction<RouteObject>;
70
}
71

72
function Route(props: RouteProps): JSX.Element;
73
```
74

75
### Navigate
76

77
A component that changes the location when it is rendered. Use it to redirect users to different pages.
78

79
```typescript { .api }
80
/**
81
 * Component that navigates when rendered
82
 * Used for declarative redirects
83
 * @param props - Navigation configuration
84
 * @returns JSX.Element navigation component
85
 */
86
interface NavigateProps {
87
  to: To;
88
  replace?: boolean;
89
  state?: any;
90
  relative?: RelativeRoutingType;
91
}
92

93
function Navigate(props: NavigateProps): JSX.Element;
94
```
95

96
### Outlet
97

98
Renders the child route's element, if there is one. Used in parent route elements to render their child routes.
99

100
```typescript { .api }
101
/**
102
 * Renders child route elements
103
 * Used in parent routes for nested routing
104
 * @param props - Outlet configuration
105
 * @returns JSX.Element outlet for child routes
106
 */
107
interface OutletProps {
108
  context?: unknown;
109
}
110

111
function Outlet(props?: OutletProps): JSX.Element;
112
```
113

114
### Router
115

116
The low-level interface shared by all router components. Typically you'll use one of the higher-level routers instead.
117

118
```typescript { .api }
119
/**
120
 * Low-level router interface
121
 * Usually used indirectly through higher-level routers
122
 * @param props - Router configuration
123
 * @returns JSX.Element router component
124
 */
125
interface RouterProps {
126
  basename?: string;
127
  children?: React.ReactNode;
128
  location: Partial<Location> | string;
129
  navigationType?: NavigationType;
130
  navigator: Navigator;
131
  static?: boolean;
132
}
133

134
function Router(props: RouterProps): JSX.Element;
135
```
136

137
### RouterProvider
138

139
Provides router state to the component tree. Used with data routers created by `createMemoryRouter`.
140

141
```typescript { .api }
142
/**
143
 * Provides router state to component tree
144
 * Used with data routers for advanced routing features
145
 * @param props - Router provider configuration
146
 * @returns JSX.Element router provider
147
 */
148
interface RouterProviderProps {
149
  router: Router;
150
  fallbackElement?: React.ReactElement | null;
151
  future?: Partial<FutureConfig>;
152
}
153

154
function RouterProvider(props: RouterProviderProps): JSX.Element;
155
```
156

157
### Await
158

159
Component for handling deferred data in route loaders. Renders different content based on promise resolution state.
160

161
```typescript { .api }
162
/**
163
 * Component for handling deferred loader data
164
 * Renders based on promise resolution state
165
 * @param props - Await configuration
166
 * @returns JSX.Element await component
167
 */
168
interface AwaitProps {
169
  children: React.ReactNode | AwaitResolveRenderFunction;
170
  errorElement?: React.ReactNode;
171
  resolve: TrackedPromise | any;
172
}
173

174
function Await(props: AwaitProps): JSX.Element;
175
```
176

177
## Usage Examples
178

179
### Basic Route Setup
180

181
```typescript
182
import { MemoryRouter, Routes, Route } from "react-router-native";
183
import { View, Text } from "react-native";
184

185
function App() {
186
  return (
187
    <MemoryRouter>
188
      <Routes>
189
        <Route path="/" element={<Home />} />
190
        <Route path="/about" element={<About />} />
191
        <Route path="/contact" element={<Contact />} />
192
      </Routes>
193
    </MemoryRouter>
194
  );
195
}
196

197
function Home() {
198
  return (
199
    <View>
200
      <Text>Home Page</Text>
201
    </View>
202
  );
203
}
204
```
205

206
### Nested Routes with Outlet
207

208
```typescript
209
import { Routes, Route, Outlet } from "react-router-native";
210
import { View, Text } from "react-native";
211

212
function App() {
213
  return (
214
    <MemoryRouter>
215
      <Routes>
216
        <Route path="/" element={<Layout />}>
217
          <Route index element={<Home />} />
218
          <Route path="products" element={<Products />}>
219
            <Route index element={<ProductList />} />
220
            <Route path=":id" element={<ProductDetail />} />
221
          </Route>
222
        </Route>
223
      </Routes>
224
    </MemoryRouter>
225
  );
226
}
227

228
function Layout() {
229
  return (
230
    <View>
231
      <Text>App Header</Text>
232
      <Outlet /> {/* Child routes render here */}
233
      <Text>App Footer</Text>
234
    </View>
235
  );
236
}
237

238
function Products() {
239
  return (
240
    <View>
241
      <Text>Products Section</Text>
242
      <Outlet /> {/* ProductList or ProductDetail render here */}
243
    </View>
244
  );
245
}
246
```
247

248
### Conditional Navigation
249

250
```typescript
251
import { Navigate } from "react-router-native";
252

253
function ProtectedRoute({ children }) {
254
  const isAuthenticated = useAuth();
255
  
256
  if (!isAuthenticated) {
257
    return <Navigate to="/login" replace />;
258
  }
259
  
260
  return children;
261
}
262

263
function App() {
264
  return (
265
    <MemoryRouter>
266
      <Routes>
267
        <Route path="/login" element={<Login />} />
268
        <Route 
269
          path="/dashboard" 
270
          element={
271
            <ProtectedRoute>
272
              <Dashboard />
273
            </ProtectedRoute>
274
          } 
275
        />
276
      </Routes>
277
    </MemoryRouter>
278
  );
279
}
280
```
281

282
### Data Router with RouterProvider
283

284
```typescript
285
import { createMemoryRouter, RouterProvider } from "react-router-native";
286

287
const router = createMemoryRouter([
288
  {
289
    path: "/",
290
    element: <Root />,
291
    loader: rootLoader,
292
    children: [
293
      {
294
        path: "team",
295
        element: <Team />,
296
        loader: teamLoader,
297
      },
298
    ],
299
  },
300
]);
301

302
function App() {
303
  return <RouterProvider router={router} />;
304
}
305
```
306

307
### Error Boundaries
308

309
```typescript
310
import { Routes, Route } from "react-router-native";
311
import { View, Text } from "react-native";
312

313
function App() {
314
  return (
315
    <MemoryRouter>
316
      <Routes>
317
        <Route
318
          path="/"
319
          element={<Root />}
320
          errorElement={<ErrorBoundary />}
321
        >
322
          <Route path="products/:id" element={<Product />} />
323
        </Route>
324
      </Routes>
325
    </MemoryRouter>
326
  );
327
}
328

329
function ErrorBoundary() {
330
  return (
331
    <View>
332
      <Text>Something went wrong!</Text>
333
    </View>
334
  );
335
}
336
```
337

338
## Types
339

340
```typescript { .api }
341
interface MemoryRouterProps {
342
  basename?: string;
343
  children?: React.ReactNode;
344
  initialEntries?: InitialEntry[];
345
  initialIndex?: number;
346
  future?: Partial<FutureConfig>;
347
}
348

349
interface RoutesProps {
350
  children?: React.ReactNode;
351
  location?: Partial<Location> | string;
352
}
353

354
interface RouteProps {
355
  caseSensitive?: boolean;
356
  children?: React.ReactNode;
357
  element?: React.ReactNode | null;
358
  index?: boolean;
359
  path?: string;
360
  loader?: LoaderFunction;
361
  action?: ActionFunction;
362
  errorElement?: React.ReactNode | null;
363
  shouldRevalidate?: ShouldRevalidateFunction;
364
  handle?: RouteHandle;
365
  lazy?: LazyRouteFunction<RouteObject>;
366
}
367

368
interface NavigateProps {
369
  to: To;
370
  replace?: boolean;
371
  state?: any;
372
  relative?: RelativeRoutingType;
373
}
374

375
interface OutletProps {
376
  context?: unknown;
377
}
378

379
interface RouterProps {
380
  basename?: string;
381
  children?: React.ReactNode;
382
  location: Partial<Location> | string;
383
  navigationType?: NavigationType;
384
  navigator: Navigator;
385
  static?: boolean;
386
}
387

388
interface RouterProviderProps {
389
  router: Router;
390
  fallbackElement?: React.ReactElement | null;
391
  future?: Partial<FutureConfig>;
392
}
393

394
interface AwaitProps {
395
  children: React.ReactNode | AwaitResolveRenderFunction;
396
  errorElement?: React.ReactNode;
397
  resolve: TrackedPromise | any;
398
}
399

400
// Supporting types
401
type To = string | Partial<Path>;
402
type RelativeRoutingType = "route" | "path";
403
type InitialEntry = string | Partial<Location>;
404
type NavigationType = "POP" | "PUSH" | "REPLACE";
405

406
interface Location extends Path {
407
  state: any;
408
  key: string;
409
}
410

411
interface Path {
412
  pathname: string;
413
  search: string;
414
  hash: string;
415
}
416
```
417

418
## Integration Notes
419

420
- **Memory-based**: All routing in React Native uses memory-based history
421
- **Nested Routing**: Full support for nested routes using Outlet components
422
- **Data Loading**: RouterProvider and data routers support loader/action patterns
423
- **Error Handling**: Built-in error boundary support for route-level error handling
424
- **State Management**: Navigate and route props support passing state between routes