react-router-native
Advanced tools
Comparing version 0.0.0-experimental-cf9637ce to 0.0.0-experimental-cffa549a1
375
CHANGELOG.md
# `react-router-native` | ||
## 6.25.0 | ||
### Patch Changes | ||
- Updated dependencies: | ||
- `react-router@6.25.0` | ||
## 6.24.1 | ||
### Patch Changes | ||
- Updated dependencies: | ||
- `react-router@6.24.1` | ||
## 6.24.0 | ||
### Patch Changes | ||
- Updated dependencies: | ||
- `react-router@6.24.0` | ||
## 6.23.1 | ||
### Patch Changes | ||
- Updated dependencies: | ||
- `react-router@6.23.1` | ||
## 6.23.0 | ||
### Minor Changes | ||
- Add a new `unstable_dataStrategy` configuration option ([#11098](https://github.com/remix-run/react-router/pull/11098)) | ||
- This option allows Data Router applications to take control over the approach for executing route loaders and actions | ||
- The default implementation is today's behavior, to fetch all loaders in parallel, but this option allows users to implement more advanced data flows including Remix single-fetch, middleware/context APIs, automatic loader caching, and more | ||
### Patch Changes | ||
- Updated dependencies: | ||
- `react-router@6.23.0` | ||
## 6.22.3 | ||
### Patch Changes | ||
- Updated dependencies: | ||
- `react-router@6.22.3` | ||
## 6.22.2 | ||
### Patch Changes | ||
- Updated dependencies: | ||
- `react-router@6.22.2` | ||
## 6.22.1 | ||
### Patch Changes | ||
- Updated dependencies: | ||
- `react-router@6.22.1` | ||
## 6.22.0 | ||
### Patch Changes | ||
- Updated dependencies: | ||
- `react-router@6.22.0` | ||
## 6.21.3 | ||
### Patch Changes | ||
- Remove leftover `unstable_` prefix from `Blocker`/`BlockerFunction` types ([#11187](https://github.com/remix-run/react-router/pull/11187)) | ||
- Updated dependencies: | ||
- `react-router@6.21.3` | ||
## 6.21.2 | ||
### Patch Changes | ||
- Updated dependencies: | ||
- `react-router@6.21.2` | ||
## 6.21.1 | ||
### Patch Changes | ||
- Updated dependencies: | ||
- `react-router@6.21.1` | ||
## 6.21.0 | ||
### Minor Changes | ||
- Add a new `future.v7_relativeSplatPath` flag to implement a breaking bug fix to relative routing when inside a splat route. ([#11087](https://github.com/remix-run/react-router/pull/11087)) | ||
This fix was originally added in [#10983](https://github.com/remix-run/react-router/issues/10983) and was later reverted in [#11078](https://github.com/remix-run/react-router/pull/11078) because it was determined that a large number of existing applications were relying on the buggy behavior (see [#11052](https://github.com/remix-run/react-router/issues/11052)) | ||
**The Bug** | ||
The buggy behavior is that without this flag, the default behavior when resolving relative paths is to _ignore_ any splat (`*`) portion of the current route path. | ||
**The Background** | ||
This decision was originally made thinking that it would make the concept of nested different sections of your apps in `<Routes>` easier if relative routing would _replace_ the current splat: | ||
```jsx | ||
<BrowserRouter> | ||
<Routes> | ||
<Route path="/" element={<Home />} /> | ||
<Route path="dashboard/*" element={<Dashboard />} /> | ||
</Routes> | ||
</BrowserRouter> | ||
``` | ||
Any paths like `/dashboard`, `/dashboard/team`, `/dashboard/projects` will match the `Dashboard` route. The dashboard component itself can then render nested `<Routes>`: | ||
```jsx | ||
function Dashboard() { | ||
return ( | ||
<div> | ||
<h2>Dashboard</h2> | ||
<nav> | ||
<Link to="/">Dashboard Home</Link> | ||
<Link to="team">Team</Link> | ||
<Link to="projects">Projects</Link> | ||
</nav> | ||
<Routes> | ||
<Route path="/" element={<DashboardHome />} /> | ||
<Route path="team" element={<DashboardTeam />} /> | ||
<Route path="projects" element={<DashboardProjects />} /> | ||
</Routes> | ||
</div> | ||
); | ||
} | ||
``` | ||
Now, all links and route paths are relative to the router above them. This makes code splitting and compartmentalizing your app really easy. You could render the `Dashboard` as its own independent app, or embed it into your large app without making any changes to it. | ||
**The Problem** | ||
The problem is that this concept of ignoring part of a path breaks a lot of other assumptions in React Router - namely that `"."` always means the current location pathname for that route. When we ignore the splat portion, we start getting invalid paths when using `"."`: | ||
```jsx | ||
// If we are on URL /dashboard/team, and we want to link to /dashboard/team: | ||
function DashboardTeam() { | ||
// ❌ This is broken and results in <a href="/dashboard"> | ||
return <Link to=".">A broken link to the Current URL</Link>; | ||
// ✅ This is fixed but super unintuitive since we're already at /dashboard/team! | ||
return <Link to="./team">A broken link to the Current URL</Link>; | ||
} | ||
``` | ||
We've also introduced an issue that we can no longer move our `DashboardTeam` component around our route hierarchy easily - since it behaves differently if we're underneath a non-splat route, such as `/dashboard/:widget`. Now, our `"."` links will, properly point to ourself _inclusive of the dynamic param value_ so behavior will break from it's corresponding usage in a `/dashboard/*` route. | ||
Even worse, consider a nested splat route configuration: | ||
```jsx | ||
<BrowserRouter> | ||
<Routes> | ||
<Route path="dashboard"> | ||
<Route path="*" element={<Dashboard />} /> | ||
</Route> | ||
</Routes> | ||
</BrowserRouter> | ||
``` | ||
Now, a `<Link to=".">` and a `<Link to="..">` inside the `Dashboard` component go to the same place! That is definitely not correct! | ||
Another common issue arose in Data Routers (and Remix) where any `<Form>` should post to it's own route `action` if you the user doesn't specify a form action: | ||
```jsx | ||
let router = createBrowserRouter({ | ||
path: "/dashboard", | ||
children: [ | ||
{ | ||
path: "*", | ||
action: dashboardAction, | ||
Component() { | ||
// ❌ This form is broken! It throws a 405 error when it submits because | ||
// it tries to submit to /dashboard (without the splat value) and the parent | ||
// `/dashboard` route doesn't have an action | ||
return <Form method="post">...</Form>; | ||
}, | ||
}, | ||
], | ||
}); | ||
``` | ||
This is just a compounded issue from the above because the default location for a `Form` to submit to is itself (`"."`) - and if we ignore the splat portion, that now resolves to the parent route. | ||
**The Solution** | ||
If you are leveraging this behavior, it's recommended to enable the future flag, move your splat to it's own route, and leverage `../` for any links to "sibling" pages: | ||
```jsx | ||
<BrowserRouter> | ||
<Routes> | ||
<Route path="dashboard"> | ||
<Route index path="*" element={<Dashboard />} /> | ||
</Route> | ||
</Routes> | ||
</BrowserRouter> | ||
function Dashboard() { | ||
return ( | ||
<div> | ||
<h2>Dashboard</h2> | ||
<nav> | ||
<Link to="..">Dashboard Home</Link> | ||
<Link to="../team">Team</Link> | ||
<Link to="../projects">Projects</Link> | ||
</nav> | ||
<Routes> | ||
<Route path="/" element={<DashboardHome />} /> | ||
<Route path="team" element={<DashboardTeam />} /> | ||
<Route path="projects" element={<DashboardProjects />} /> | ||
</Router> | ||
</div> | ||
); | ||
} | ||
``` | ||
This way, `.` means "the full current pathname for my route" in all cases (including static, dynamic, and splat routes) and `..` always means "my parents pathname". | ||
### Patch Changes | ||
- Updated dependencies: | ||
- `react-router@6.21.0` | ||
## 6.20.1 | ||
### Patch Changes | ||
- Updated dependencies: | ||
- `react-router@6.20.1` | ||
## 6.20.0 | ||
### Minor Changes | ||
- Export the `PathParam` type from the public API ([#10719](https://github.com/remix-run/react-router/pull/10719)) | ||
### Patch Changes | ||
- Updated dependencies: | ||
- `react-router@6.20.0` | ||
## 6.19.0 | ||
### Patch Changes | ||
- Updated dependencies: | ||
- `react-router@6.19.0` | ||
## 6.18.0 | ||
### Patch Changes | ||
- Updated dependencies: | ||
- `react-router@6.18.0` | ||
## 6.17.0 | ||
### Patch Changes | ||
- Updated dependencies: | ||
- `react-router@6.17.0` | ||
## 6.16.0 | ||
### Minor Changes | ||
- Updated dependencies: | ||
- `react-router@6.16.0` | ||
## 6.15.0 | ||
### Minor Changes | ||
- Add's a new `redirectDocument()` function which allows users to specify that a redirect from a `loader`/`action` should trigger a document reload (via `window.location`) instead of attempting to navigate to the redirected location via React Router ([#10705](https://github.com/remix-run/react-router/pull/10705)) | ||
### Patch Changes | ||
- Update `@ungap/url-search-params` dependency from `^0.1.4` to `^0.2.2` ([#10590](https://github.com/remix-run/react-router/pull/10590)) | ||
- Updated dependencies: | ||
- `react-router@6.15.0` | ||
## 6.14.2 | ||
### Patch Changes | ||
- Updated dependencies: | ||
- `react-router@6.14.2` | ||
## 6.14.1 | ||
### Patch Changes | ||
- Updated dependencies: | ||
- `react-router@6.14.1` | ||
## 6.14.0 | ||
### Patch Changes | ||
- Upgrade `typescript` to 5.1 ([#10581](https://github.com/remix-run/react-router/pull/10581)) | ||
- Updated dependencies: | ||
- `react-router@6.14.0` | ||
## 6.13.0 | ||
### Patch Changes | ||
- Updated dependencies: | ||
- `react-router@6.13.0` | ||
## 6.12.1 | ||
### Patch Changes | ||
- Updated dependencies: | ||
- `react-router@6.12.1` | ||
## 6.12.0 | ||
### Patch Changes | ||
- Updated dependencies: | ||
- `react-router@6.12.0` | ||
## 6.11.2 | ||
### Patch Changes | ||
- Export `SetURLSearchParams` type ([#10444](https://github.com/remix-run/react-router/pull/10444)) | ||
- Updated dependencies: | ||
- `react-router@6.11.2` | ||
## 6.11.1 | ||
### Patch Changes | ||
- Updated dependencies: | ||
- `react-router@6.11.1` | ||
## 6.11.0 | ||
### Patch Changes | ||
- Updated dependencies: | ||
- `react-router@6.11.0` | ||
## 6.10.0 | ||
### Patch Changes | ||
- Updated dependencies: | ||
- `react-router@6.10.0` | ||
## 6.9.0 | ||
### Minor Changes | ||
- Updated dependencies: | ||
- `react-router@6.9.0` | ||
## 6.8.2 | ||
### Patch Changes | ||
- Updated dependencies: | ||
- `react-router@6.8.2` | ||
## 6.8.1 | ||
@@ -4,0 +379,0 @@ |
@@ -5,12 +5,12 @@ import * as React from "react"; | ||
import URLSearchParams from "@ungap/url-search-params"; | ||
export type { ActionFunction, ActionFunctionArgs, AwaitProps, unstable_Blocker, unstable_BlockerFunction, DataRouteMatch, DataRouteObject, Fetcher, Hash, IndexRouteObject, IndexRouteProps, JsonFunction, LayoutRouteProps, LoaderFunction, LoaderFunctionArgs, Location, MemoryRouterProps, NavigateFunction, NavigateOptions, NavigateProps, Navigation, Navigator, NonIndexRouteObject, OutletProps, Params, ParamParseKey, Path, PathMatch, Pathname, PathPattern, PathRouteProps, RedirectFunction, RelativeRoutingType, RouteMatch, RouteObject, RouteProps, RouterProps, RouterProviderProps, RoutesProps, Search, ShouldRevalidateFunction, To, } from "react-router"; | ||
export { AbortedDeferredError, Await, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, RouterProvider, Routes, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, defer, isRouteErrorResponse, generatePath, json, matchPath, matchRoutes, parsePath, redirect, renderMatches, resolvePath, useActionData, useAsyncError, useAsyncValue, unstable_useBlocker, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, } from "react-router"; | ||
export type { ActionFunction, ActionFunctionArgs, AwaitProps, Blocker, BlockerFunction, DataRouteMatch, DataRouteObject, unstable_DataStrategyFunction, unstable_DataStrategyFunctionArgs, unstable_DataStrategyMatch, ErrorResponse, Fetcher, FutureConfig, Hash, IndexRouteObject, IndexRouteProps, JsonFunction, LazyRouteFunction, LayoutRouteProps, LoaderFunction, LoaderFunctionArgs, Location, MemoryRouterProps, NavigateFunction, NavigateOptions, NavigateProps, Navigation, Navigator, NonIndexRouteObject, OutletProps, Params, ParamParseKey, Path, PathMatch, Pathname, PathParam, PathPattern, PathRouteProps, RedirectFunction, RelativeRoutingType, RouteMatch, RouteObject, RouteProps, RouterProps, RouterProviderProps, RoutesProps, Search, ShouldRevalidateFunction, ShouldRevalidateFunctionArgs, To, UIMatch, unstable_HandlerResult, } from "react-router"; | ||
export { AbortedDeferredError, Await, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, RouterProvider, Routes, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, defer, isRouteErrorResponse, generatePath, json, matchPath, matchRoutes, parsePath, redirect, redirectDocument, renderMatches, resolvePath, useActionData, useAsyncError, useAsyncValue, useBlocker, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, } from "react-router"; | ||
/** @internal */ | ||
export { UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_NavigationContext, UNSAFE_LocationContext, UNSAFE_RouteContext, UNSAFE_enhanceManualRouteObjects, } from "react-router"; | ||
export { UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_NavigationContext, UNSAFE_LocationContext, UNSAFE_RouteContext, UNSAFE_useRouteId, } from "react-router"; | ||
export interface NativeRouterProps extends MemoryRouterProps { | ||
} | ||
/** | ||
* A <Router> that runs on React Native. | ||
* A `<Router>` that runs on React Native. | ||
*/ | ||
export declare function NativeRouter(props: NativeRouterProps): JSX.Element; | ||
export declare function NativeRouter(props: NativeRouterProps): React.JSX.Element; | ||
export interface LinkProps extends TouchableHighlightProps { | ||
@@ -25,5 +25,5 @@ children?: React.ReactNode; | ||
/** | ||
* A <TouchableHighlight> that navigates to a different URL when touched. | ||
* A `<TouchableHighlight>` that navigates to a different URL when touched. | ||
*/ | ||
export declare function Link({ onPress, relative, replace, state, to, ...rest }: LinkProps): JSX.Element; | ||
export declare function Link({ onPress, relative, replace, state, to, ...rest }: LinkProps): React.JSX.Element; | ||
/** | ||
@@ -54,5 +54,5 @@ * Handles the press behavior for router `<Link>` components. This is useful if | ||
export declare function useSearchParams(defaultInit?: URLSearchParamsInit): [URLSearchParams, SetURLSearchParams]; | ||
declare type SetURLSearchParams = (nextInit?: URLSearchParamsInit | ((prev: URLSearchParams) => URLSearchParamsInit), navigateOpts?: NavigateOptions) => void; | ||
export declare type ParamKeyValuePair = [string, string]; | ||
export declare type URLSearchParamsInit = string | ParamKeyValuePair[] | Record<string, string | string[]> | URLSearchParams; | ||
export type SetURLSearchParams = (nextInit?: URLSearchParamsInit | ((prev: URLSearchParams) => URLSearchParamsInit), navigateOpts?: NavigateOptions) => void; | ||
export type ParamKeyValuePair = [string, string]; | ||
export type URLSearchParamsInit = string | ParamKeyValuePair[] | Record<string, string | string[]> | URLSearchParams; | ||
/** | ||
@@ -59,0 +59,0 @@ * Creates a URLSearchParams object using the given initializer. |
/** | ||
* React Router Native v0.0.0-experimental-cf9637ce | ||
* React Router Native v0.0.0-experimental-cffa549a1 | ||
* | ||
@@ -14,3 +14,3 @@ * Copyright (c) Remix Software Inc. | ||
import { MemoryRouter, useNavigate, useLocation } from 'react-router'; | ||
export { AbortedDeferredError, Await, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, RouterProvider, Routes, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, UNSAFE_enhanceManualRouteObjects, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, renderMatches, resolvePath, unstable_useBlocker, useActionData, useAsyncError, useAsyncValue, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes } from 'react-router'; | ||
export { AbortedDeferredError, Await, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, RouterProvider, Routes, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, UNSAFE_useRouteId, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, redirectDocument, renderMatches, resolvePath, useActionData, useAsyncError, useAsyncValue, useBlocker, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes } from 'react-router'; | ||
import URLSearchParams from '@ungap/url-search-params'; | ||
@@ -23,3 +23,2 @@ | ||
var key, i; | ||
for (i = 0; i < sourceKeys.length; i++) { | ||
@@ -30,16 +29,10 @@ key = sourceKeys[i]; | ||
} | ||
return target; | ||
} | ||
function _objectWithoutProperties(source, excluded) { | ||
if (source == null) return {}; | ||
var target = _objectWithoutPropertiesLoose(source, excluded); | ||
var key, i; | ||
if (Object.getOwnPropertySymbols) { | ||
var sourceSymbolKeys = Object.getOwnPropertySymbols(source); | ||
for (i = 0; i < sourceSymbolKeys.length; i++) { | ||
@@ -52,3 +45,2 @@ key = sourceSymbolKeys[i]; | ||
} | ||
return target; | ||
@@ -55,0 +47,0 @@ } |
MIT License | ||
Copyright (c) React Training 2015-2019 | ||
Copyright (c) Remix Software 2020-2022 | ||
Copyright (c) React Training LLC 2015-2019 | ||
Copyright (c) Remix Software Inc. 2020-2021 | ||
Copyright (c) Shopify Inc. 2022-2023 | ||
@@ -6,0 +7,0 @@ Permission is hereby granted, free of charge, to any person obtaining a copy |
{ | ||
"name": "react-router-native", | ||
"version": "0.0.0-experimental-cf9637ce", | ||
"version": "0.0.0-experimental-cffa549a1", | ||
"description": "Declarative routing for React Native applications", | ||
@@ -24,8 +24,11 @@ "keywords": [ | ||
"dependencies": { | ||
"@ungap/url-search-params": "^0.1.4", | ||
"react-router": "0.0.0-experimental-cf9637ce" | ||
"@ungap/url-search-params": "^0.2.2", | ||
"react-router": "0.0.0-experimental-cffa549a1" | ||
}, | ||
"devDependencies": { | ||
"@types/react-test-renderer": "^18.0.0", | ||
"react": "^18.2.0", | ||
"react-native": "^0.69.5" | ||
"react-native": "^0.69.5", | ||
"react-test-renderer": "^18.2.0", | ||
"react-router-native": "0.0.0-experimental-cffa549a1" | ||
}, | ||
@@ -43,4 +46,4 @@ "peerDependencies": { | ||
"engines": { | ||
"node": ">=14" | ||
"node": ">=14.0.0" | ||
} | ||
} | ||
} |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
39225
0
5
+ Added@remix-run/router@0.0.0-experimental-cffa549a1(transitive)
+ Added@ungap/url-search-params@0.2.2(transitive)
+ Addedreact-router@0.0.0-experimental-cffa549a1(transitive)
- Removed@remix-run/router@0.0.0-experimental-cf9637ce(transitive)
- Removed@ungap/url-search-params@0.1.4(transitive)
- Removedreact-router@0.0.0-experimental-cf9637ce(transitive)