You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: packages/router/README.md
+23-19Lines changed: 23 additions & 19 deletions
Original file line number
Diff line number
Diff line change
@@ -1,11 +1,12 @@
1
-
# Router
1
+
# Remix Router
2
2
3
-
The `@remix-run/router` package is the heart of [React Router](https://github.com/remix-run/react-router) and provides all the core functionality for routing, data loading, data mutations, and navigation.
3
+
The `@remix-run/router` package is a framework-agnostic routing package (sometimes referred to as a browser-emulator) that serves as the heart of [React Router][react-router] and [Remix][remix] and provides all the core functionality for routing coupled with data loading and data mutations. It comes with built-in handling of errors, race-conditions, interruptions, cancellations, lazy-loading data, and much, much more.
4
4
5
-
If you're using React Router, you should never `import` anything directly from
6
-
the `@remix-run/router` or `react-router` packages, but you should have everything
7
-
you need in either `react-router-dom` or `react-router-native`. Both of those
8
-
packages re-export everything from `@remix-run/router` and `react-router`.
5
+
If you're using React Router, you should never `import` anything directly from the `@remix-run/router` or `react-router` packages, but you should have everything you need in either `react-router-dom` or `react-router-native`. Both of those packages re-export everything from `@remix-run/router` and `react-router`.
6
+
7
+
> **Warning**
8
+
>
9
+
> This router is a low-level package intended to be consumed by UI layer routing libraries. You should very likely not be using this package directly unless you are authoring a routing library such as [`react-router-dom`][react-router-repo] or one of it's other [UI ports][remix-routers-repo].
9
10
10
11
## API
11
12
@@ -15,38 +16,30 @@ A Router instance can be created using `createRouter`:
15
16
// Create and initialize a router. "initialize" contains all side effects
16
17
// including history listeners and kicking off the initial data fetch
17
18
let router =createRouter({
18
-
// Routes array using react-router RouteObject's
19
-
routes,
19
+
// Routes array
20
+
routes:,
20
21
// History instance
21
22
history,
22
-
// Optional hydration data for SSR apps
23
-
hydrationData?: HydrationState;
24
23
}).initialize()
25
24
```
26
25
27
26
Internally, the Router represents the state in an object of the following format, which is available through `router.state`. You can also register a subscriber of the signature `(state: RouterState) => void` to execute when the state updates via `router.subscribe()`;
28
27
29
28
```ts
30
29
interfaceRouterState {
30
+
// False during the initial data load, true once we have our initial data
31
+
initialized:boolean;
31
32
// The `history` action of the most recently completed navigation
32
33
historyAction:Action;
33
34
// The current location of the router. During a navigation this reflects
34
35
// the "old" location and is updated upon completion of the navigation
35
36
location:Location;
36
37
// The current set of route matches
37
38
matches:DataRouteMatch[];
38
-
// False during the initial data load, true once we have our initial data
39
-
initialized:boolean;
40
39
// The state of the current navigation
41
40
navigation:Navigation;
42
-
// The state of an in-progress router.revalidate() calls
41
+
// The state of any in-progress router.revalidate() calls
43
42
revalidation:RevalidationState;
44
-
// Scroll position to restore to for the active Location, false if we
45
-
// should not restore,m or null if we don't have a saved position
46
-
// Note: must be enabled via router.enableScrollRestoration()
47
-
restoreScrollPosition:number|false|null;
48
-
// Proxied `preventScrollReset` value passed to router.navigate() (default false)
49
-
preventScrollReset:boolean;
50
43
// Data from the loaders for the current matches
51
44
loaderData:RouteData;
52
45
// Data from the action for the current matches
@@ -55,6 +48,12 @@ interface RouterState {
55
48
errors:RouteData|null;
56
49
// Map of all active fetchers
57
50
fetchers:Map<string, Fetcher>;
51
+
// Scroll position to restore to for the active Location, false if we
52
+
// should not restore, or null if we don't have a saved position
53
+
// Note: must be enabled via router.enableScrollRestoration()
54
+
restoreScrollPosition:number|false|null;
55
+
// Proxied `preventScrollReset` value passed to router.navigate()
By default, active loaders will revalidate after any navigation or fetcher mutation. If you need to kick off a revalidation for other use-cases, you can use `router.revalidate()` to re-execute all active loaders.
0 commit comments