react-router
)
@react-router/*
)此页面列出了 React Router 从 v6.0.0
开始的所有版本/版本说明。对于 v6 之前的版本,请参考 Github 版本发布页面。
我们在本文件中管理版本说明,而不是使用 Github 版本发布页面的分页功能,原因有两个
日期:2024-12-02
临时只在导出映射中使用一个构建,以便包可以对 react router 具有对等依赖关系 (#12437)
支持 moduleResolution
Node16
和 NodeNext
(#12440)
为子路由生成宽松的 matches
和 params
类型 (#12397)
在运行时,matches
包含子路由匹配,params
包含子路由路径参数。但之前,我们只为父路由和 matches
和 params
中的当前路由生成了类型。为了使我们生成的类型更接近运行时行为,我们现在在访问子路由信息时生成更宽松、更广泛的类型。
react-router
@react-router/architect
@react-router/cloudflare
@react-router/dev
@react-router/express
@react-router/fs-routes
@react-router/node
@react-router/remix-config-routes-adapter
@react-router/serve
完整变更日志:v7.0.1...v7.0.2
日期:2024-11-22
react-router
@react-router/architect
@react-router/cloudflare
@react-router/dev
@react-router/express
@react-router/fs-routes
@react-router/node
@react-router/remix-config-routes-adapter
@react-router/serve
完整变更日志:v7.0.0...v7.0.1
日期:2024-11-21
react-router-dom
、@remix-run/react
、@remix-run/server-runtime
和 @remix-run/router
已合并到 react-router
包中react-router-dom
在 v7 中仍然发布为 react-router
中所有内容的重新导出@remix-run/cloudflare-pages
和 @remix-run/cloudflare-workers
已合并到 @react-router/cloudflare
包中react-router-dom-v5-compat
和 react-router-native
包被移除Remix v2 过去习惯于通过各种运行时包(node
、cloudflare
、deno
)重新导出所有常见的 @remix-run/server-runtime
API,这样您就不需要在 package.json
中添加额外的 @remix-run/server-runtime
依赖项。随着包合并到 react-router
中,这些通用 API 现在不再通过运行时适配器重新导出。您应该从 react-router
导入所有通用 API,并且只从运行时包导入特定于运行时的 API
// Runtime-specific APIs
import { createFileSessionStorage } from "@react-router/node";
// Runtime-agnostic APIs
import { redirect, useLoaderData } from "react-router";
以下 API 已在 React Router v7 中移除
json
defer
unstable_composeUploadHandlers
unstable_createMemoryUploadHandler
unstable_parseMultipartFormData
React Router v7 需要以下最低版本
node@20
installGlobals
方法来 polyfill fetch
APIreact@18
、react-dom@18
Remix 和 React Router 遵循 API 开发策略,利用“未来特性标志”来避免在主要版本中引入大量重大变更。相反,重大变更是在次要版本中以标志的形式引入,允许用户在方便时选择加入。在下一个主要版本中,所有未来特性标志行为都将成为默认行为。
以下先前已标记的行为现在是 React Router v7 中的默认行为
future.v7_relativeSplatPath
future.v7_startTransition
future.v7_fetcherPersist
future.v7_normalizeFormMethod
future.v7_partialHydration
future.v7_skipActionStatusRevalidation
future.v3_fetcherPersist
future.v3_relativeSplatPath
future.v3_throwAbortReason
future.v3_singleFetch
future.v3_lazyRouteDiscovery
future.v3_optimizeDeps
Remix Vite 插件 是使用 React Router v7 构建全栈 SSR 应用程序的正确方法。以前的基于 esbuild
的编译器不再可用。
重命名 vitePlugin
和 cloudflareDevProxyVitePlugin
对于迁移到 React Router 的 Remix 用户,vitePlugin
和 cloudflareDevProxyVitePlugin
导出已被重命名并移动 (#11904)
-import {
- vitePlugin as remix,
- cloudflareDevProxyVitePlugin,
-} from "@remix/dev";
+import { reactRouter } from "@react-router/dev/vite";
+import { cloudflareDevProxy } from "@react-router/dev/vite/cloudflare";
移除 manifest
选项
对于迁移到 React Router 的 Remix 用户,Vite 插件的 manifest
选项已被移除。manifest
选项已被功能更强大的 buildEnd
钩子取代,因为它传递了 buildManifest
参数。您仍然可以将构建清单写入磁盘(如果需要),但您很可能会发现直接在 buildEnd
钩子中编写任何依赖于构建清单的逻辑更方便。(#11573)
如果您正在使用 manifest
选项,您可以将其替换为一个 buildEnd
钩子,该钩子将清单写入磁盘,如下所示
// react-router.config.ts
import { type Config } from "@react-router/dev/config";
import { writeFile } from "node:fs/promises";
export default {
async buildEnd({ buildManifest }) {
await writeFile(
"build/manifest.json",
JSON.stringify(buildManifest, null, 2),
"utf-8"
);
},
} satisfies Config;
因为 React 19 将对在渲染过程中处理 Promise 提供一流的支持(通过 React.use
和 useAction
),所以我们现在可以放心地公开之前返回 undefined
的 API 的 Promise
useNavigate()
useSubmit()
useFetcher().load
useFetcher().submit
useRevalidator().revalidate()
routes.ts
使用 React Router Vite 插件时,路由定义在 app/routes.ts
中。路由配置通过 routes
导出导出,符合 RouteConfig
类型。提供了路由辅助函数 route
、index
和 layout
,以使声明式类型安全的路由定义更容易。
// app/routes.ts
import {
type RouteConfig,
route,
index,
layout,
} from "@react-router/dev/routes";
export const routes: RouteConfig = [
index("./home.tsx"),
route("about", "./about.tsx"),
layout("./auth/layout.tsx", [
route("login", "./auth/login.tsx"),
route("register", "./auth/register.tsx"),
]),
route("concerts", [
index("./concerts/home.tsx"),
route(":city", "./concerts/city.tsx"),
route("trending", "./concerts/trending.tsx"),
]),
];
对于迁移到 React Router 的 Remix 用户,您仍然可以使用 @react-router/fs-routes
包在 routes.ts
中配置文件系统路由。一个重现默认 Remix 设置的最小路由配置如下所示
// app/routes.ts
import { type RouteConfig } from "@react-router/dev/routes";
import { flatRoutes } from "@react-router/fs-routes";
export const routes: RouteConfig = flatRoutes();
如果您想从文件系统路由迁移到基于配置的路由,您可以通过将异步 flatRoutes
函数的结果扩展到基于配置的路由数组中来混合匹配方法。
// app/routes.ts
import { type RouteConfig, route } from "@react-router/dev/routes";
import { flatRoutes } from "@react-router/fs-routes";
export const routes: RouteConfig = [
// Example config-based route:
route("/hello", "./routes/hello.tsx"),
// File system routes scoped to a different directory:
...(await flatRoutes({
rootDirectory: "fs-routes",
})),
];
如果您正在使用 Remix 的 routes
选项使用替代的文件系统路由约定,您可以使用 @react-router/remix-config-routes-adapter
将这些约定适配到新的 RouteConfig
格式。
例如,如果您在 Remix v2 中使用 Remix v1 路由约定,您可以将 @react-router/remix-config-routes-adapter
与 @remix-run/v1-route-convention
结合使用以将其适配到 React Router
// app/routes.ts
import { type RouteConfig } from "@react-router/dev/routes";
import { remixConfigRoutes } from "@react-router/remix-config-routes-adapter";
import { createRoutesFromFolders } from "@remix-run/v1-route-convention";
export const routes: RouteConfig = remixConfigRoutes(async (defineRoutes) => {
return createRoutesFromFolders(defineRoutes, {
ignoredFilePatterns: ["**/.*", "**/*.css"],
});
});
另请注意,如果您正在使用 Remix 的 routes
选项定义基于配置的路由,您也可以使用 @react-router/remix-config-routes-adapter
将这些路由适配到新的 RouteConfig
格式,只需进行最少的代码更改。虽然这为快速迁移路径提供了便利,但我们建议将 Remix 中的任何基于配置的路由迁移到新的 RouteConfig
格式,因为它是一个相当简单的迁移。
// app/routes.ts
-import { type RouteConfig } from "@react-router/dev/routes";
+import { type RouteConfig, route } from "@react-router/dev/routes";
-import { remixConfigRoutes } from "@react-router/remix-config-routes-adapter";
-export const routes: RouteConfig = remixConfigRoutes(async (defineRoutes) => {
- defineRoutes((route) => {
- route("/parent", "./routes/parent.tsx", () => [
- route("/child", "./routes/child.tsx"),
- ]);
- });
-});
+export const routes: RouteConfig = [
+ route("/parent", "./routes/parent.tsx", [
+ route("/child", "./routes/child.tsx"),
+ ]),
+];
React Router 现在为您的每个路由模块生成类型,并将类型化 props 传递给路由模块组件导出 (#11961、#12019)。您可以通过从 ./+types/<route filename without extension>
导入它们来访问这些类型。
有关更多详细信息,请参阅 如何操作 > 路由模块类型安全 和 解释 > 类型安全。
React Router v7 在 vite 插件中包含一个新的 prerender
配置以支持 SSG 用例。这将在构建时预渲染您的 .html
和 .data
文件,以便您可以从运行的服务器或 CDN 中在运行时静态地提供它们 (#11539)
export default defineConfig({
plugins: [
reactRouter({
async prerender({ getStaticPaths }) {
let slugs = await fakeGetSlugsFromCms();
return [
...getStaticPaths(),
...slugs.map((slug) => `/product/${slug}`),
];
},
}),
tsconfigPaths(),
],
});
async function fakeGetSlugsFromCms() {
await new Promise((r) => setTimeout(r, 1000));
return ["shirt", "hat"];
}
react-router
)defer
实现,转而使用通过单个fetch和turbo-stream
的原生Promise(#11744)defer
AbortedDeferredError
类型 TypedDeferredData
UNSAFE_DeferredData
UNSAFE_DEFERRED_SYMBOL
react-router
中(#11505)@remix-run/router
react-router-dom
@remix-run/server-runtime
@remix-run/testing
react-router-dom
包是为了方便采用,但它只是从react-router
重新导出所有APIfuture.v7_startTransition
标志(#11696)future.v7_normalizeFormMethod
未来标志(#11697)@remix-run/router
的公共APIAgnosticDataIndexRouteObject
AgnosticDataNonIndexRouteObject
AgnosticDataRouteMatch
AgnosticDataRouteObject
AgnosticIndexRouteObject
AgnosticNonIndexRouteObject
AgnosticRouteMatch
AgnosticRouteObject
TrackedPromise
unstable_AgnosticPatchRoutesOnMissFunction
Action
-> 通过react-router
导出为NavigationType
Router
导出为RemixRouter
,以区别于RR的<Router>
getToPathname
(@private
)joinPaths
(@private
)normalizePathname
(@private
)resolveTo
(@private
)stripBasename
(@private
)createBrowserHistory
-> 改为使用createBrowserRouter
createHashHistory
-> 改为使用createHashRouter
createMemoryHistory
-> 改为使用createMemoryRouter
createRouter
createStaticHandler
-> 改为使用RR Dom中的包装器createStaticHandler
getStaticContextFromError
react-router
的公共APIHash
Pathname
Search
@remix-run/router
包中移除future.v7_prependBasename
(#11726)@remix-run/router
包中移除future.v7_throwAbortReason
(#11728)exports
字段(#11675)RemixContext
重命名为FrameworkContext
(#11705)PrefetchPageDescriptor
被PageLinkDescriptor
替换(#11960)future.v7_partialHydration
标志(#11725)<RouterProvider fallbackElement>
属性fallbackElement
移动到根路由上的hydrateFallbackElement
/HydrateFallback
future.v7_partialHydration
的情况下(使用fallbackElement
时),state.navigation
在初始加载期间被填充future.v7_partialHydration
时,state.navigation
在初始加载期间保持"idle"
状态future.v7_relativeSplatPath
未来标志(#11695)v7_skipActionErrorRevalidation
v3_fetcherPersist
、v3_relativeSplatPath
、v3_throwAbortReason
createRemixStub
重命名为createRoutesStub
(#11692)@remix-run/router
中已弃用的detectErrorBoundary
选项,改为使用mapRouteProperties
(#11751)react-router/dom
子路径导出以正确启用react-dom
作为可选的peerDependency
(#11851)<RouterProvider>
中盲目地import ReactDOM from "react-dom"
来访问ReactDOM.flushSync()
,因为这会破坏非DOM环境中的createMemoryRouter
用例react-router/dom
导入以获取使ReactDOM.flushSync()
可用的正确组件entry.client.tsx
中使用此方法import { HydratedRouter } from 'react-router/dom'
createBrowserRouter
/createHashRouter
import { RouterProvider } from "react-router/dom"
future.v7_fetcherPersist
标志(#11731)undefined
(#11680,#12057)entry.client
中使用createRemixRouter
/RouterProvider
代替RemixBrowser
(#11469)json
实用程序(#12146)Response.json
@react-router/*
)future.v3_singleFetch
标志(#11522)installGlobals()
,因为这不再需要exports
字段(#11675)react-router
重新导出API(#11702)crypto
全局对象react-router
而不是特定于平台的包中提供的:(#11837)createCookie
createCookieSessionStorage
createMemorySessionStorage
createSessionStorage
@remix-run/node
中的installGlobals
函数已更新为定义globalThis.crypto
,使用Node的require('node:crypto').webcrypto
实现createCookieFactory
createSessionStorageFactory
createCookieSessionStorageFactory
createMemorySessionStorageFactory
@remix-run/router
、@remix-run/server-runtime
和@remix-run/react
中重复的类型,因为它们现在都位于react-router
中(#12177)LoaderFunction
、LoaderFunctionArgs
、ActionFunction
、ActionFunctionArgs
、DataFunctionArgs
、RouteManifest
、LinksFunction
、Route
、EntryRoute
RouteManifest
类型现在稍微严格一些,因为它使用的是以前的@remix-run/router
RouteManifest
Record<string, Route> -> Record<string, Route | undefined>
AppData
类型,改为在它被使用的少数位置内联unknown
ServerRuntimeMeta*
类型,改为使用它们从中复制的Meta*
类型Route.*
类型Route.*
类型useFetcher
以前有一个可选的泛型(主要由Remix v2使用),它期望数据类型typeof loader
/typeof action
)useFetcher<LoaderData>()
useFetcher<typeof loader>()
cookie
依赖项更新到^1.0.1
- 请参阅发行说明以了解任何重大更改(#12172)@react-router/cloudflare
- 对于迁移到React Router的Remix使用者,@remix-run/cloudflare-pages
中的所有导出现在都提供给@react-router/cloudflare
包中的React Router使用者。不再有单独的Cloudflare Pages包。(#11801)@react-router/cloudflare
- @remix-run/cloudflare-workers
包已弃用。迁移到React Router的Remix使用者应直接使用@react-router/cloudflare
包。有关如何在Cloudflare Workers上下文中使用@react-router/cloudflare
的指南,请参阅Cloudflare Workers模板。(#11801)@react-router/dev
- 对于迁移到React Router的Remix使用者,vitePlugin
和cloudflareDevProxyVitePlugin
导出已被重命名和移动。(#11904)@react-router/dev
- 对于使用Vite插件的buildEnd
钩子的Remix使用者,已解析的reactRouterConfig
对象不再包含publicPath
属性,因为这属于Vite,而不是React Router(#11575)@react-router/dev
- 对于迁移到React Router的Remix使用者,Vite插件的manifest
选项已被移除(#11573)@react-router/dev
- 将默认的 isbot
版本更新到 v5,并停止支持 isbot@3
(#11770)package.json
中包含 isbot@4
或 isbot@5
package.json
中包含 isbot@3
,并且你的仓库中存在自定义的 entry.server.tsx
文件isbot@5
package.json
中包含 isbot@3
,并且你的仓库中不存在自定义的 entry.server.tsx
文件package.json
中升级到 isbot@5
@react-router/dev
- 对于迁移到 React Router 的 Remix 用户,Vite 清单文件 (例如 .vite/manifest.json
) 现在写入每个构建子目录中,例如 build/client/.vite/manifest.json
和 build/server/.vite/manifest.json
,而不是 build/.vite/client-manifest.json
和 build/.vite/server-manifest.json
。这意味着构建输出现在更接近于您从典型的 Vite 项目中期望得到的输出。(#11573)build/.vite
目录中,以避免在生产环境中意外地提供它们,特别是来自客户端构建的清单文件。后来通过添加额外的逻辑来改进这一点,该逻辑在构建过程结束时删除这些 Vite 清单文件,除非在应用程序的 Vite 配置中启用了 Vite 的 build.manifest
。这大大降低了在生产环境中意外提供 Vite 清单文件的风险,因为它们只有在明确请求时才会出现。因此,我们现在可以假设用户知道他们需要自己管理这些额外文件,并且 React Router 可以安全地生成更标准的 Vite 构建输出。react-router
- 将参数、加载器数据和操作数据作为路由组件导出时的 props 传递 (#11961)react-router
- 添加路由模块类型生成 (#12019)react-router
- 删除重复的 RouterProvider
实现 (#11679)react-router
- 稳定 unstable_dataStrategy
(#11969)react-router
- 稳定 unstable_patchRoutesOnNavigation
(#11970)react-router
- 在使用 Remix SSR 时,为 Link
/NavLink
添加预取支持 (#11402)react-router
- 增强 ScrollRestoration
,使其能够在 SSR 渲染的文档加载时正确恢复滚动位置 (#11401)@react-router/dev
- 在 React Router vite 插件中添加对 prerender
配置的支持,以支持现有的 SSG 使用场景 (#11539)@react-router/dev
- 删除内部 entry.server.spa.tsx
实现,该实现与单次获取异步水合方法不兼容 (#11681)@react-router/serve
: 更新 express.static
配置以支持新的 prerender
API (#11547)build/client/assets
文件夹中的资源与以前一样提供服务,并带有 1 年的不可变 Cache-Control
标头.html
和 .data
文件,不提供特定的 Cache-Control
标头.data
文件使用 Content-Type: text/x-turbo
提供服务express.static
添加此项时,它似乎还会为 .data
文件添加 Cache-Control: public, max-age=0
标头substr
替换为 substring
(#12080)react-router
- 修复使用 data()
从加载器/操作返回的重定向 (#12021)@react-router/dev
- 为资源路由启用预渲染 (#12200)@react-router/dev
- 将配置目录解析为相对于扁平输出文件结构的路径 (#12187)react-router
@react-router/architect
@react-router/cloudflare
@react-router/dev
@react-router/express
@react-router/fs-routes
@react-router/node
@react-router/remix-config-routes-adapter
@react-router/serve
完整变更日志: v6.28.0...v7.0.0
日期: 2024-11-06
json
/defer
添加弃用警告,建议改为返回原始对象完整变更日志: v6.27.0...v6.28.0
日期: 2024-10-11
此版本稳定了一些“不稳定”的 API,为即将发布的 React Router v7 做准备 (有关更多信息,请参阅 此处 和 此处 的文章)
unstable_dataStrategy
→ dataStrategy
(createBrowserRouter
及其相关函数) (文档)unstable_patchRoutesOnNavigation
→ patchRoutesOnNavigation
(createBrowserRouter
及其相关函数) (文档)unstable_flushSync
→ flushSync
(useSubmit
、fetcher.load
、fetcher.submit
) (文档)unstable_viewTransition
→ viewTransition
(<Link>
、<Form>
、useNavigate
、useSubmit
) (文档)unstable_flushSync
选项 (#11989)unstable_viewTransition
选项以及相应的 unstable_useViewTransitionState
钩子 (#11989)unstable_dataStrategy
(#11974)unstable_patchRoutesOnNavigation
(#11973)PatchRoutesOnNavigationFunctionArgs
类型 (#11967)?index
参数时,提交到当前上下文路由(具有索引子路由的父路由)时的错误 (#12003)useFormAction
错误 - 删除 ?index
参数时,它不会保留其他非 Remix 的 index
参数 (#12003)preventScrollReset
的错误 (#11999)console.error
(#12050)patchRoutesOnNavigation
调用导致的问题 (#12055)unstable_
API 中的此行为,这可能是重大更改patchRoutesOnNavigation
的正在进行的调用,以便具有相同开始/结束位置的多个导航只会执行该函数一次并使用相同的 Promisepatch
在导航中断(并且 request.signal
被中止)时短路相冲突,因为第一次调用的 patch
将不起作用import()
等内容的重复调用已经会自动缓存,如果不是,用户也很容易在用户端实现此缓存unstable_patchRoutesOnNavigation
中删除内部 discoveredRoutes
FIFO 队列 (#11977)unstable_
API 中的此行为,这可能是重大更改patchRoutesOnNavigation
中实现自己的缓存PatchRoutesOnNavigationFunction
的 patch
方法中 RouteObject
的类型,使其不再期望将泛型路由对象传递给 patch
(#11967)patchRoutesOnNavigation
中抛出的错误直接暴露给 useRouteError
,而不是将它们包装在 400 ErrorResponse
实例中 (#12111)完整变更日志: v6.26.2...v6.27.0
日期: 2024-09-09
unstable_dataStrategy
API 以允许更高级的实现 (#11943)unstable_dataStrategy
,请仔细查看,因为它包含对此 API 的重大更改unstable_HandlerResult
重命名为 unstable_DataStrategyResult
unstable_dataStrategy
的返回值签名从 unstable_DataStrategyResult[]
的并行数组 (与 matches
并行) 更改为 routeId => unstable_DataStrategyResult
的键值对象match.shouldLoad
)handlerOverride
返回/抛出结果,而不是返回 DataStrategyResult
handlerOverride
的返回值(或抛出的错误)将被包装到 DataStrategyResult
中并从 match.resolve
返回match.resolve()
的结果聚合到最终结果对象中,则无需考虑 DataStrategyResult
类型handlerOverride
中手动填充结果对象,则需要分配 DataStrategyResult
作为值,以便 React Router 知道它是成功执行还是错误 (有关详细信息,请参阅文档中的示例)unstable_dataStrategy
添加了一个新的 fetcherKey
参数,以允许区分导航和获取器调用blocker.proceed
被快速/同步调用时的阻塞器使用问题 (#11930)
完整变更日志: v6.26.1...v6.26.2
日期: 2024-08-15
unstable_patchRoutesOnMiss
重命名为 unstable_patchRoutesOnNavigation
以匹配新的行为 (#11888)unstable_patchRoutesOnNavigation
逻辑,以便在匹配具有动态参数或通配符段的路由时调用该方法,以防存在我们尚未发现的得分更高的静态路由 (#11883)unstable_patchRoutesOnNavigation
的路径,这样我们就可以避免在随后导航到相同路径时重复调用完整变更日志: v6.26.0...v6.26.1
日期: 2024-08-01
replace(url, init?)
方法,作为 redirect(url, init?)
的替代方案,该方法在客户端导航重定向时执行 history.replaceState
而不是 history.pushState
(#11811)unstable_data()
API,用于与 Remix 单次获取配合使用 (#11836)createStaticHandler.query()
配合使用,允许加载器/操作返回任意数据以及自定义的 status
/headers
,而无需强制将数据序列化为 Response
实例unstable_dataStrategy
使用更高级的序列化策略,例如在 Remix 单次获取中通过 turbo-stream
进行序列化HandlerResult
中移除 status
字段unstable_dataStrategy
返回特定的 status
,则应通过 unstable_data()
来完成future.v7_partialHydration
以及 unstable_patchRoutesOnMiss
时初始水合的行为 (#11838)router.state.matches
现在将包含任何部分匹配,以便我们可以渲染祖先 HydrateFallback
组件完整变更日志: v6.25.1...v6.26.0
日期: 2024-07-17
RouterProvider
内部内容以减少不必要的重新渲染 (#11803)完整变更日志: v6.25.0...v6.25.1
日期: 2024-07-16
v7_skipActionErrorRevalidation
此版本将 future.unstable_skipActionErrorRevalidation
标记稳定化为 future.v7_skipActionErrorRevalidation
,以准备即将发布的 React Router v7 版本。
4xx/5xx
Response
的操作默认情况下不会触发重新验证shouldRevalidate
的 unstable_actionStatus
参数稳定化为 actionStatus
future.unstable_skipActionErrorRevalidation
稳定化为 future.v7_skipActionErrorRevalidation
(#11769)useMatch
内部的路径,以便匹配/参数反映解码后的参数 (#11789)unstable_patchRoutesOnMiss
抛出的错误冒泡 (#11786)unstable_patchRoutesOnMiss
的 SSR 应用程序中,服务器匹配通配符路由时的水合问题 (#11790)完整变更日志: v6.24.1...v6.25.0
日期: 2024-07-03
polyfill.io
引用,因为该域名已被出售,并且后来被发现用于传播恶意软件 (#11741)
NavLinkRenderProps
类型,以便更轻松地为自定义 NavLink
回调键入 (#11553)future.v7_relativeSplatPath
时,正确解析无路径路由子级中的通配符路由的相对路径 (#11633)router.routes
标识/重排 (#11740)完整变更日志: v6.24.0...v6.24.1
日期: 2024-06-24
我们非常高兴在 v6.24.0
中发布我们新的“延迟路由发现”API!有关一些背景信息,请查看原始的 RFC。简而言之,自从我们在 v6.4 中通过 <RouterProvider>
引入数据 API 以来,我们一直有点沮丧,因为其中一个权衡是缺少一个类似于我们在 <BrowserRouter>
/<Routes>
应用程序中拥有的引人注目的代码拆分故事。我们在 v6.9.0
中通过 route.lazy
迈出了改进该故事的一小步,但在 v6.24.0
中,我们已经完成了剩下的工作。
使用“战争迷雾”,您现在可以通过传递给 createBrowserRouter
(及其内存/哈希对应项)的新 unstable_patchRoutesOnMiss
选项延迟加载路由树的部分内容。这为您提供了一种方法来挂接到 React Router 无法匹配给定路径并修补导航(或获取器调用)期间路由树中的新路由的位置。
这是一个非常小的示例,但请参阅 文档 以获取更多信息和用例
const router = createBrowserRouter(
[
{
id: "root",
path: "/",
Component: RootComponent,
},
],
{
async unstable_patchRoutesOnMiss({ path, patch }) {
if (path === "/a") {
// Load the `a` route (`{ path: 'a', Component: A }`)
let route = await getARoute();
// Patch the `a` route in as a new child of the `root` route
patch("root", [route]);
}
},
}
);
fetcher.submit
类型 - 删除不正确的 navigate
/fetcherKey
/unstable_viewTransition
选项,因为它们仅与 useSubmit
相关 (#11631)<StaticRouter>
的 location.state
值为假值 (#11495)完整变更日志: v6.23.1...v6.24.0
日期: 2024-05-10
<Await>
解析 undefined
(#11513)document.startViewTransition
可用性时添加防御性的 document
检查 (#11544)react-router-dom/server
导入更改回 react-router-dom
而不是 index.ts
(#11514)@remix-run/router
- 在 staticHandler.queryRoute
上支持 unstable_dataStrategy
(#11515)完整变更日志: v6.23.0...v6.23.1
日期: 2024-04-23
新的 unstable_dataStrategy
API 是一个低级 API,专为需要控制 loader
/action
函数的数据策略的高级用例而设计。默认实现是今天的行为,并行获取所有加载器,但此选项允许用户实现更高级的数据流,包括 Remix "单次获取"、用户级中间件/上下文 API、自动加载器缓存等。请参阅 文档 以获取更多信息。
注意:这是一个专为高级用例设计的低级 API。这会覆盖 React Router 内部处理 loader
/action
执行的方式,如果操作不当,将导致您的应用程序代码出错。请谨慎使用并进行适当的测试。
目前,所有活动的 loader
都会在任何 action
提交后重新验证,而不管 action
结果如何。但是,在大多数情况下,action
返回的 4xx
/5xx
响应意味着实际上没有更改任何数据,并且重新验证是不必要的。我们引入了一个新的 future.unstable_skipActionErrorRevalidation
标记来更改此处的行为,我们计划在未来版本的 React Router 中将其设为默认值。
启用此标志后,返回/抛出 4xx
/5xx
响应状态的 action
将不再自动重新验证。如果在启用此标志后需要在 4xx
/5xx
结果之后重新验证,您仍然可以通过从 shouldRevalidate
返回 true
来实现 - 现在 shouldRevalidate
还接收一个新的 unstable_actionStatus
参数以及 actionResult
,以便您可以根据 action
响应的状态做出决策,而无需将其编码到 action 数据中。
unstable_dataStrategy
配置选项 (#11098, #11377)@remix-run/router
- 添加新的 future.unstable_skipActionRevalidation
未来标志 (#11098)@remix-run/router
- SSR:在 staticHandler.query
方法中添加了一个新的 skipLoaderErrorBubbling
选项,以禁用静态处理程序的错误冒泡,用于 Remix 的单次获取实现 (#11098, (#11377))完整变更日志:v6.22.3...v6.23.0
日期:2024-03-07
future.v7_partialHydration
的一个 bug,如果 SSR 加载程序错误冒泡到父边界,则该 bug 会在 hydration 期间重新运行边界下方的加载程序 (#11324)future.v7_partialHydration
的一个 bug,如果路由没有加载程序,则该 bug 会将路由器视为未初始化 (#11325)完整变更日志:v6.22.2...v6.22.3
日期:2024-02-28
完整变更日志:v6.22.1...v6.22.2
日期:2024-02-16
完整变更日志:v6.22.0...v6.22.1
日期:2024-02-01
2021 年,HTTP Archive 推出了 核心 Web 指标技术报告仪表板
通过结合 Chrome UX Report 26 (CrUX) 数据集中真实用户体验的功能以及 HTTP Archive 30 中的 Web 技术检测,我们可以了解架构决策(例如 CMS 平台或 JavaScript 框架的选择)如何在网站的 CWV 性能中发挥作用。
他们使用名为 wappalyzer
的工具,通过查找某些脚本、全局 JS 变量或其他识别特征来识别给定网站正在使用的技术。例如,对于 Remix 应用程序,他们 查找全局 __remixContext
变量以识别网站是否正在使用 Remix。
我们注意到,React Router 无法被可靠地识别,因为没有识别性的全局方面。他们目前 正在查找名称中包含 react-router
的外部脚本。这将识别使用来自 CDN(如 unpkg
)的 React Router 的网站 - 但它会错过绝大多数从 npm 注册表安装 React Router 并将其捆绑到其 JS 文件中的网站。这导致 大幅低估 Web 上 React Router 的使用情况。
从 6.22.0
版本开始,使用 react-router-dom
的网站将开始添加 window.__reactRouterVersion
变量,该变量将设置为 SemVer 主版本号的字符串值(即,window.__reactRouterVersion = "6";
),以便可以正确识别它们。
window.__reactRouterVersion
以进行 CWV 报告检测 (#11222)createStaticHandler
添加 future.v7_throwAbortReason
标志,在请求被中止时抛出 request.signal.reason
(默认为 DOMException
),而不是像 new Error("query() call aborted: GET /path")
这样的 Error
(#11104)DOMException
是在 Node v17 中添加的,因此在 Node 16 及以下版本中您不会获得 DOMException
。getStaticContextFormError
,则尊重 ErrorResponse
状态代码 (#11213)完整变更日志:v6.21.3...v6.22.0
日期:2024-01-18
basename
时 NavLink
isPending
的问题 (#11195)Blocker
/BlockerFunction
类型中删除剩余的 unstable_
前缀 (#11187)完整变更日志:v6.21.2...v6.21.3
日期:2024-01-11
完整变更日志:v6.21.1...v6.21.2
日期:2023-12-21
v7_partialHydration
时,route.lazy
在初始 SPA 加载时无法正常工作的 bug (#11121)submitting
阶段卸载期间持久化 fetcher 发生重新验证的 bug (#11102)resolveTo
中对相对路径逻辑进行去重 (#11097)完整变更日志:v6.21.0...v6.21.1
日期:2023-12-13
future.v7_relativeSplatPath
我们在 6.19.0
中修复了一个 splat 路由路径解析错误,但后来确定大量应用程序依赖于有问题的行为,因此我们在 6.20.1
中撤回了修复程序(请参阅 #10983、#11052、#11078)。
有问题的行为是,在 splat 路由内解析相对路径时的默认行为会忽略当前路由路径的任何 splat(*
)部分。启用未来标志后,splat 部分将包含在 splat 路由内的相对路径逻辑中。
有关更多信息,请参阅 useResolvedPath
文档 和/或 详细的变更日志条目。
我们为 @remix-run/router
添加了一个新的 future.v7_partialHydration
未来标志,用于在服务器端渲染时启用数据路由器的部分 hydration。这允许您提供 hydrationData.loaderData
,其中包含某些最初匹配的路由加载程序的值,但并非全部。启用此标志后,路由器将在 router.initialize()
期间为没有 hydration 加载程序数据的路由调用 loader
函数,并且它将在执行未 hydration 的路由时渲染到提供的最深 HydrateFallback
(直到第一个没有 hydration 数据的路由)。(#11033)
future.v7_relativeSplatPath
标志,以实现对在 splat 路由内进行相对路由时的重大 bug 修复。(#11087)future.v7_partialHydration
未来标志,用于在服务器端渲染时启用数据路由器的部分 hydration (#11033)ErrorBoundary
中的虚假错误值 (#11071)loader
/action
函数中解包响应时抛出的错误 (#11061)Link
/NavLink
时的 relative="path"
问题 (#11062)完整变更日志:v6.20.1...v6.21.0
日期:2023-12-01
useResolvedPath
对 splat 路由的修复(请参阅 #11052)(#11078)6.19.0
和 6.20.0
版本中。如果您从 6.18.0
或更早版本升级,则不会受到此修复程序的影响。完整变更日志:v6.20.0...v6.20.1
日期:2023-11-22
[!警告] 请使用
6.20.1
或更高版本,而不是6.20.0
。我们发现大量应用程序依赖于此版本中修复的有问题的行为 (#11045)。我们在6.20.1
中撤回了修复程序,并将在后续版本中使用未来标志重新引入它。有关更多详细信息,请参阅 #11052。
PathParam
类型 (#10719)v7_fetcherPersist
时,不要重新验证卸载的 fetcher (#11044)resolveTo
路径解析的 bug (#11045)getPathContributingMatches
的其他几个代码路径
@remix-run/router
中的 UNSAFE_getPathContributingMatches
导出,因为我们在 react-router
/react-router-dom
层中不再需要它。完整变更日志:v6.19.0...v6.20.0
日期:2023-11-16
[!警告] 请使用
6.20.1
或更高版本,而不是6.19.0
。我们发现许多应用程序依赖于此版本中已修复的错误行为 (#10983)。我们在6.20.1
中回滚了修复程序,并在后续版本中将其重新引入到一个未来的标志后面。有关更多详细信息,请参阅 #11052。
unstable_flushSync
API此版本为命令式 API(useSubmit
、useNavigate
、fetcher.submit
、fetcher.load
)引入了新的 unstable_flushSync
选项,允许用户选择对挂起/乐观 UI 进行同步 DOM 更新。
function handleClick() {
submit(data, { flushSync: true });
// Everything is flushed to the DOM so you can focus/scroll to your pending/optimistic UI
setFocusAndOrScrollToNewlyAddedThing();
}
unstable_flushSync
选项添加到 useNavigate
/useSubmit
/fetcher.load
/fetcher.submit
以选择退出 React.startTransition
并进入 ReactDOM.flushSync
以进行状态更新 (#11005)useBlocker
钩子中删除 unstable_
前缀,因为它已经使用了一段时间,我们对 API 充满信心 (#10991)unstable_usePrompt
中删除前缀,因为浏览器处理 window.confirm
的方式存在差异,这阻止了 React Router 保证一致/正确的行为。修复 useActionData
,使其返回正确的上下文操作数据,而不是树中的任何操作数据 (#11023)
修复 useResolvedPath
中的一个错误,该错误会导致在散列路由中 useResolvedPath(".")
丢失 URL 路径的散列部分。(#10983)
"."
路径,该路径错误地删除了 URL 的散列部分。如果您在应用程序中的散列路由内通过 "."
进行相对路由,则应仔细检查您的逻辑是否不依赖于此错误行为并进行相应更新。修复了在 useFetcher
中保持挂载状态的更改的 fetcher key
未被拾取的问题 (#11009)
修复 useFormAction
,它错误地从子路由 action
提交中继承了 ?index
查询参数 (#11025)
修复 NavLink
active
逻辑,当 to
位置具有尾随斜杠时 (#10734)
修复类型,以便 unstable_usePrompt
除了 boolean
之外还可以接受 BlockerFunction
(#10991)
修复 relative="path"
错误,其中相对路径计算从完整位置路径名开始,而不是从当前上下文路由路径名开始。(#11006)
<Route path="/a">
<Route path="/b" element={<Component />}>
<Route path="/c" />
</Route>
</Route>;
function Component() {
return (
<>
{/* This is now correctly relative to /a/b, not /a/b/c */}
<Link to=".." relative="path" />
<Outlet />
</>
);
}
完整变更日志:6.18.0...6.19.0
日期:2023-10-31
根据此 RFC,我们引入了一些新的 API,让您能够更精细地控制 Fetcher 的行为。
useFetcher({ key: string })
指定您自己的 Fetcher 标识符,这允许您从应用程序中不同组件访问相同的 Fetcher 实例,而无需进行 prop 传递。useFetchers
返回的 Fetcher 上公开,以便可以通过 key
进行查找。Form
和 useSubmit
现在支持可选的 navigate
/fetcherKey
属性/参数,以允许在幕后启动 Fetcher 提交,并使用可选的用户指定的 key
。<Form method="post" navigate={false} fetcherKey="my-key">
submit(data, { method: "post", navigate: false, fetcherKey: "my-key" })
useFetchers()
或 useFetcher({ key })
在其他地方查找它。future.v7_fetcherPersist
)根据与上面相同的 RFC,我们引入了一个新的 future.v7_fetcherPersist
标志,允许您选择加入新的 Fetcher 持久性/清理行为。Fetcher 不会在卸载时立即清理,而是会一直持续到返回空闲状态。这使得在源 Fetcher 需要卸载的情况下,挂起/乐观 UI 变得非常容易。
useFetchers()
API 始终只反映挂起/乐观 UI 的进行中的 Fetcher 信息——它并非旨在反映 Fetcher 数据或在它们返回空闲状态后保留 Fetcher。useFetchers()
中——因为您可以通过 useFetcher().data
访问数据,所以它们在那里没有任何用处。useFetchers
公开,因此您仍然可以在卸载后访问挂起/乐观数据。key
重新挂载,则其结果将被处理,即使源 Fetcher 已卸载。key
API 和 navigate=false
选项 (#10960)future.v7_fetcherPersist
标志 (#10962)matchPath
中添加对可选路径段的支持 (#10768)BrowserRouter
、HashRouter
和 MemoryRouter
上的 future
属性,使其接受 Partial<FutureConfig>
而不是要求包含所有标志 (#10962)router.getFetcher
/router.deleteFetcher
类型定义,它们错误地将 key
指定为可选参数 (#10960)完整变更日志:6.17.0...6.18.0
日期:2023-10-16
我们很高兴在 React Router 中发布对 视图过渡 API 的实验性支持!您现在可以触发导航 DOM 更新以包装在 document.startViewTransition
中,以便在应用程序的 SPA 导航中启用 CSS 动画过渡。
在您的 React Router 应用程序中启用视图过渡的最简单方法是通过新的 <Link unstable_viewTransition>
属性。这将导致导航 DOM 更新包装在 document.startViewTransition
中,这将为 DOM 更新启用过渡。如果没有其他 CSS 样式,您将获得页面基本交叉淡入淡出动画。
如果您需要为动画应用更细粒度的样式,您可以利用 unstable_useViewTransitionState
钩子,它会告诉您何时正在进行过渡,您可以使用它来应用类或样式。
function ImageLink(to, src, alt) {
const isTransitioning = unstable_useViewTransitionState(to);
return (
<Link to={to} unstable_viewTransition>
<img
src={src}
alt={alt}
style={{
viewTransitionName: isTransitioning ? "image-expand" : "",
}}
/>
</Link>
);
}
您还可以使用 <NavLink unstable_viewTransition>
简写,它将为您管理钩子用法,并在过渡期间自动向 <a>
添加 transitioning
类。
a.transitioning img {
view-transition-name: "image-expand";
}
<NavLink to={to} unstable_viewTransition>
<img src={src} alt={alt} />
</NavLink>
有关视图过渡用法的示例,请查看我们对很棒的 Astro Records 演示的 fork。
有关使用视图过渡 API 的更多信息,请参阅 Google Chrome 团队的 使用视图过渡 API 实现流畅简单的过渡 指南。
sessionStorage
不可用时,在 ScrollRestoration
中记录警告并优雅地失败 (#10848)RouterProvider
future
属性类型为 Partial<FutureConfig>
,以便不必指定所有标志 (#10900)ErrorResponse
类型以避免泄漏内部字段 (#10876)完整变更日志:6.16.0...6.17.0
日期:2023-09-13
any
的用法替换为公开类型中用户提供数据的 unknown
。为了在 Remix v2 中做到这一点,而不会在 React Router v6 中引入重大更改,我们在许多共享类型中添加了泛型。这些在 React Router 中继续默认为 any
,并在 Remix 中被覆盖为 unknown
。在 React Router v7 中,我们计划将其作为重大更改移动到 unknown
。(#10843)Location
现在接受 location.state
值的泛型。ActionFunctionArgs
/ActionFunction
/LoaderFunctionArgs
/LoaderFunction
现在接受 context
参数的泛型(仅在通过 createStaticHandler
的 SSR 用法中使用)。useMatches
的返回类型(现在导出为 UIMatch
)接受 match.data
和 match.handle
的泛型——这两者都已设置为 unknown
。@private
类导出 ErrorResponse
移动到 UNSAFE_ErrorResponseImpl
导出,因为它是一个实现细节,用户空间中不应有 ErrorResponse
实例的构造。这使我们能够导出一个 type ErrorResponse
,该类型通过 InstanceType
与类的实例相关联。用户空间代码应该只将 ErrorResponse
用作类型,并且应该通过 isRouteErrorResponse
进行类型缩小。(#10811)ShouldRevalidateFunctionArgs
接口 (#10797)
_isFetchActionRedirect
、_hasFetcherDoneAnything
)(#10715)query
/queryRoute
调用中添加方法/URL 到错误消息(#10793)route.lazy
路由上加载器/操作抛出错误时的竞争条件(#10778)shouldRevalidate
的参数对象上的 actionResult
类型(#10779)完整变更日志:v6.15.0...v6.16.0
日期:2023-08-10
redirectDocument()
函数,允许用户指定来自 loader
/action
的重定向应该触发文档重新加载(通过 window.location
),而不是尝试通过 React Router 导航到重定向的位置(#10705)useRevalidator
在重新渲染时是引用稳定的(#10707)URLSearchParams
和 useSearchParams
钩子的 Web 扩展程序的边缘情况(#10620)unstable_usePrompt
中的 effect 以避免在提示解除阻止并同步执行导航时抛出异常(#10687、#10718)useFormAction()
中包含哈希,因为它无法在服务器上确定并会导致水合问题(#10758)queryRoute
中的一个问题,该问题并非始终识别抛出的 Response
实例(#10717)react-router-native
:将 @ungap/url-search-params
依赖项从 ^0.1.4
更新到 ^0.2.2
(#10590)完整变更日志:v6.14.2...v6.15.0
日期:2023-07-17
<Form state>
属性以在提交导航时填充 history.state
(#10630)defer
promise 使用 undefined
解析/拒绝,则触发错误,以匹配加载器和操作的行为,它们必须返回值或 null
(#10690)<ScrollRestoration>
模拟哈希滚动时正确解码元素 ID(#10682)Route.lazy
的返回类型以禁止返回空对象(#10634)Error
子类(如 ReferenceError
/TypeError
)的正确水合(#10633)完整变更日志:v6.14.1...v6.14.2
日期:2023-06-30
unstable_useBlocker
中的循环(#10652)@remix-run/[email protected]
完整变更日志:v6.14.0...v6.14.1
日期:2023-06-23
6.14.0
添加了对通过 useSubmit
/fetcher.submit
进行 JSON 和文本提交的支持,因为如果您在客户端 SPA 中工作,则并非总是方便地必须序列化为 FormData
。要选择加入这些编码,您只需指定正确的 formEncType
即可
选择加入 application/json
编码
function Component() {
let navigation = useNavigation();
let submit = useSubmit();
submit({ key: "value" }, { method: "post", encType: "application/json" });
// navigation.formEncType => "application/json"
// navigation.json => { key: "value" }
}
async function action({ request }) {
// request.headers.get("Content-Type") => "application/json"
// await request.json() => { key: "value" }
}
选择加入 text/plain
编码
function Component() {
let navigation = useNavigation();
let submit = useSubmit();
submit("Text submission", { method: "post", encType: "text/plain" });
// navigation.formEncType => "text/plain"
// navigation.text => "Text submission"
}
async function action({ request }) {
// request.headers.get("Content-Type") => "text/plain"
// await request.text() => "Text submission"
}
⚠️ v7 中的默认行为将更改
请注意,为了避免重大更改,默认行为仍会将简单的键/值 JSON 对象编码为 FormData
实例
function Component() {
let navigation = useNavigation();
let submit = useSubmit();
submit({ key: "value" }, { method: "post" });
// navigation.formEncType => "application/x-www-form-urlencoded"
// navigation.formData => FormData instance
}
async function action({ request }) {
// request.headers.get("Content-Type") => "application/x-www-form-urlencoded"
// await request.formData() => FormData instance
}
此行为可能会在 v7 中更改,因此最好使用 formEncType: "application/x-www-form-urlencoded"
或 formEncType: "application/json"
明确进行任何 JSON 对象提交,以简化您最终的 v7 迁移路径。
useSubmit
/fetcher.submit
的 application/json
和 text/plain
编码的支持。为了反映这些附加类型,useNavigation
/useFetcher
现在还包含 navigation.json
/navigation.text
和 fetcher.json
/fetcher.text
,如果适用,其中包含 json/文本提交。(#10413)submitter
元素提交表单时,优先使用内置的 new FormData(form, submitter)
而不是现代浏览器(支持新 submitter
参数的浏览器)中的先前手动方法(#9865)type="image"
按钮添加了基本支持formdata-submitter-polyfill
window.history.pushState/replaceState
(而不是之后),以便在同步 React 17 渲染期间 window.location
与 useLocation
匹配(#10448)window.location
,并且应该始终在可能的情况下引用 useLocation
,因为 window.location
不会一直同步(由于 popstate
事件、并发模式等)。shouldRevalidate
(#10623)<ScrollRestoration getKey>
的 location
中剥离 basename
以匹配 useLocation
行为(#10550)unstable_useBlocker
函数的 location 中剥离 basename
以匹配 useLocation
行为(#10573)StrictMode
中的 unstable_useBlocker
键问题(#10573)0
参数时 generatePath
的问题(#10612)tsc --skipLibCheck:false
的问题(#10622)typescript
升级到 5.1(#10581)完整变更日志:v6.13.0...v6.14.0
日期:2023-06-14
6.13.0
实际上从精神上讲是一个补丁版本,但由于我们添加了一个新的未来标志,因此带有语义化版本次要更新。
future.v7_startTransition
简而言之,6.13.0
与 6.12.0
相同,但我们将 React.startTransition
的使用移到了一个可选的 future.v7_startTransition
未来标志 后面,因为我们发现现实中存在一些应用程序以与 React.startTransition
不兼容的方式使用 Suspense
。
因此,在 6.13.0
中,默认行为将不再利用 React.startTransition
<BrowserRouter>
<Routes>{/*...*/}</Routes>
</BrowserRouter>
<RouterProvider router={router} />
如果您希望启用 React.startTransition
,请将未来标志传递给您的路由器组件
<BrowserRouter future={{ v7_startTransition: true }}>
<Routes>{/*...*/}</Routes>
</BrowserRouter>
<RouterProvider router={router} future={{ v7_startTransition: true }}/>
我们建议大家尽早采用此标志以更好地与 React 并发模式兼容,但如果您遇到问题,您可以继续在没有 React.startTransition
的情况下使用,直到 v7 为止。问题通常归结为在渲染周期中创建新的 promise,因此如果您在选择加入 React.startTransition
时遇到问题,您应该将 promise 创建提升到渲染周期之外或将其放在 useMemo
后面。
React.startTransition
的使用移到未来标志后面(#10596)React.startTransition
缩小错误(#10588)完整变更日志:v6.12.1...v6.13.0
日期:2023-06-08
[!警告] 请使用
6.13.0
或更高版本,而不是6.12.0
/6.12.1
。这些版本存在一些 Webpack 构建/压缩问题,导致构建失败或生产包中的代码压缩无效。更多详情请查看 #10569 和 #10579。
React.startTransition
的特性检测,修复 webpack + react 17 编译错误 (#10569)完整变更日志: v6.12.0...v6.12.1
日期: 2023-06-06
[!警告] 请使用
6.13.0
或更高版本,而不是6.12.0
/6.12.1
。这些版本存在一些 Webpack 构建/压缩问题,导致构建失败或生产包中的代码压缩无效。更多详情请查看 #10569 和 #10579。
React.startTransition
支持在 6.12.0
中,我们通过将内部路由状态更新包装在 React.startTransition
中,增强了对挂起组件的支持。这意味着,例如,如果目标路由中的某个组件挂起,并且您没有提供 Suspense
边界来显示回退内容,React 将延迟渲染新 UI 并显示旧 UI,直到该异步操作完成。这对于等待图像或 CSS 文件加载等操作很有用(从技术上讲,您可以将其用于数据加载,但我们仍然建议使用加载器来完成此操作 😀)。有关此用法的快速概述,请查看 Ryan 在 Twitter 上的演示。
React.startTransition
包装内部路由状态更新 (#10438)PUSH
导航时重新抛出 DOMException
(DataCloneError
)。(#10427)jest
和 jsdom
(#10453)@remix-run/[email protected]
(变更日志)完整变更日志: v6.11.2...v6.12.0
日期: 2023-05-17
<RouterProvider>
内的子 <Routes>
中的 basename
重复问题 (#10492)SetURLSearchParams
类型 (#10444)_internalSetRoutes
中正确重建新的路由和 manifest
,修复 Remix HMR 驱动的错误边界 (#10437)完整变更日志: v6.11.1...v6.11.2
日期: 2023-05-03
<Routes>
中 Component
API 的用法 (#10434)<RouterProvider>
内的 <Routes>
调用 useNavigate
时出现的错误 (#10432)<Navigate>
的用法 (#10435)basename
的处理 (#10433)/path#hash -> /path#hash
)(#10408)完整变更日志: v6.11.0...v6.11.1
日期: 2023-04-28
useFetcher
中的 basename
支持 (#10336)basename
来解决此问题,则需要从您的 fetcher
调用中删除手动添加的 basename
(fetcher.load('/basename/route') -> fetcher.load('/route')
)@remix-run/[email protected]
(变更日志)RouterProvider
时,useNavigate
/useSubmit
/fetcher.submit
现在在位置更改中保持稳定,因为我们可以通过 @remix-run/router
实例处理相对路由,并摆脱我们对 useLocation()
的依赖 (#10336)BrowserRouter
时,这些钩子在位置更改中仍然不稳定,因为它们仍然依赖于 useLocation()
action
提交或 router.revalidate
调用时重新验证 (#10344)Component
而不是 element
时意外重新渲染的问题 (#10287)<Link to="//">
和其他无效 URL 值上优雅地失败 (#10367)<RouterProvider>
中内部 @remix-run/router
路由器状态同步的 useSyncExternalStore
替换为 useState
。我们发现了一些 细微的错误,其中路由器状态更新在其他正常的 useState
更新 *之前* 传播,这可能导致 useEffect
调用中的潜在问题。(#10377, #10409)RouterProvider
存在错误时阻止渲染子 <Routes>
的错误 (#10374)activeRef
来修复渲染周期中 useNavigate
的检测,允许将 navigate
函数传递给子组件并在那里的 useEffect
中调用它 (#10394)useRevalidator()
解决加载器驱动的错误边界场景 (#10369)LoaderFunction
/ActionFunction
返回类型,以防止 undefined
成为有效的返回值 (#10267)loader
的路由的 fetcher.load
调用返回正确的 404 错误 (#10345)AbortController
使用解耦,以便重新验证 fetchers 的卸载/删除不会影响正在进行的触发导航/重新验证 (#10271)完整变更日志: v6.10.0...v6.11.0
日期: 2023-03-29
我们最近在 Remix 博客上发布了一篇名为 "为您的 Remix 应用程序做好未来准备" 的文章,其中介绍了我们确保您的 Remix 和 React Router 应用程序顺利升级的策略。React Router 6.10.0
添加了对这些标志(对于数据路由器)的支持,您可以在创建路由器时指定它们
const router = createBrowserRouter(routes, {
future: {
// specify future flags here
},
});
future.v7_normalizeFormMethod
第一个引入的未来标志是 future.v7_normalizeFormMethod
,它将规范公开的 useNavigation()/useFetcher()
formMethod
字段为大写 HTTP 方法,以与 fetch()
(以及某些 Remix)行为保持一致。(#10207)
future.v7_normalizeFormMethod
未指定或设置为 false
(默认 v6 行为)时,useNavigation().formMethod
为小写useFetcher().formMethod
为小写future.v7_normalizeFormMethod === true
时useNavigation().formMethod
为大写useFetcher().formMethod
为大写createStaticHandler
,除了 errorElement
之外,还要检查路由上的 ErrorBoundary
(#10190)createRoutesFromElements
中使用片段时路由 ID 生成 (#10193)shouldRevalidate
(#10208)lazy()
错误 (#10201)DeferredData
的 instanceof
检查,以增强在 SSR 捆绑场景中对 ESM/CJS 边界的弹性 (#10247)@remix-run/[email protected]
(#10216)完整变更日志: v6.9.0...v6.10.0
日期: 2023-03-10
Component
/ErrorBoundary
路由属性React Router 现在支持一种替代方法来定义您的路由 element
和 errorElement
字段为 React 组件而不是 React 元素。如果需要,您可以将 React 组件传递给新的 Component
和 ErrorBoundary
字段。两者之间没有功能差异,因此使用您喜欢的任何方法 😀。您不应该同时定义两者,但如果您这样做,Component
/ErrorBoundary
将“优先”
JSON 语法示例
// Both of these work the same:
const elementRoutes = [{
path: '/',
element: <Home />,
errorElement: <HomeError />,
}]
const componentRoutes = [{
path: '/',
Component: Home,
ErrorBoundary: HomeError,
}]
function Home() { ... }
function HomeError() { ... }
JSX 语法示例
// Both of these work the same:
const elementRoutes = createRoutesFromElements(
<Route path='/' element={<Home />} errorElement={<HomeError /> } />
);
const componentRoutes = createRoutesFromElements(
<Route path='/' Component={Home} ErrorBoundary={HomeError} />
);
function Home() { ... }
function HomeError() { ... }
为了使您的应用程序包保持较小规模并支持路由的代码拆分,我们引入了一个新的 lazy()
路由属性。这是一个异步函数,它解析路由定义中不匹配路由的部分(loader
、action
、element
/Component
、errorElement
/ErrorBoundary
、shouldRevalidate
、handle
)。
延迟路由在初始加载以及导航或 fetcher 调用期间的 loading
或 submitting
阶段解析。由于我们只有在匹配已知路由后才会执行延迟路由函数,因此您无法延迟定义路由匹配属性(path
、index
、children
)。
您的 lazy
函数通常会返回动态导入的结果。
// In this example, we assume most folks land on the homepage so we include that
// in our critical-path bundle, but then we lazily load modules for /a and /b so
// they don't load until the user navigates to those routes
let routes = createRoutesFromElements(
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="a" lazy={() => import("./a")} />
<Route path="b" lazy={() => import("./b")} />
</Route>
);
然后在您的延迟路由模块中,导出您希望为路由定义的属性。
export async function loader({ request }) {
let data = await fetchData(request);
return json(data);
}
// Export a `Component` directly instead of needing to create a React Element from it
export function Component() {
let data = useLoaderData();
return (
<>
<h1>You made it!</h1>
<p>{data}</p>
</>
);
}
// Export an `ErrorBoundary` directly instead of needing to create a React Element from it
export function ErrorBoundary() {
let error = useRouteError();
return isRouteErrorResponse(error) ? (
<h1>
{error.status} {error.statusText}
</h1>
) : (
<h1>{error.message || error}</h1>
);
}
您可以在存储库的 examples/lazy-loading-router-provider
目录中找到此功能的示例。有关更多信息,请查看 lazy
文档。
🙌 感谢 @rossipedia 提供的 初始提案 和 POC 实现。
generatePath
在某些情况下错误地应用参数的问题 (#10078)[react-router-dom-v5-compat]
添加缺失的数据路由器 API 重新导出 (#10171)完整变更日志:v6.8.2...v6.9.0
日期:2023-02-27
<Link to>
中的同源绝对 URL 位于路由 basename
之外,则将其视为外部 URL (#10135)basename
之外的同源绝对 URL 正确执行硬重定向 (#10076)<Link to>
URL 的 SSR (#10112)StaticRouterProvider
序列化水合数据中正确转义 HTML 字符 (#10068)useBlocker
在 SSR 期间返回 IDLE_BLOCKER
的问题 (#10046)createStaticHandler
的 query()
方法中维护 defer
加载程序响应的状态代码和标头 (#10077)invariant
更改为 UNSAFE_invariant
导出,因为它仅用于内部使用 (#10066)完整变更日志:v6.8.1...v6.8.2
日期:2023-02-06
Link
组件中的绝对 URL 检测(现在还支持 mailto:
URL)(#9994)完整变更日志:v6.8.0...v6.8.1
日期:2023-01-26
支持 <Link to>
中的绝对 URL。如果 URL 针对当前来源,它将继续执行客户端导航。如果 URL 针对不同的来源,则它将对新来源发出新的文档请求。(#9900)
<Link to="https://neworigin.com/some/path"> {/* Document request */}
<Link to="//neworigin.com/some/path"> {/* Document request */}
<Link to="https://www.currentorigin.com/path"> {/* Client-side navigation */}
shouldRevalidate
调用中 2 个不同的问题 (#9948)shouldRevalidate
函数仅在显式重新验证场景(在变异、手动 useRevalidator
调用或用于在 Remix 中设置 cookie 的 X-Remix-Revalidate
标头之后)中被调用。它没有在也适用于导航 loader
重新验证的隐式重新验证场景中正确调用,例如搜索参数更改或单击我们已在其中的页面的链接。现在它在这些其他场景中被正确调用。current*
/next*
参数反映了静态 fetcher.load
URL(因此是相同的)。相反,它们应该反映触发重新验证的导航(就像 form*
参数一样)。这些参数现在正确地反映了触发导航。useSearchParams
删除搜索参数的错误 (#9969)<fetcher.Form>
上的 preventScrollReset
(#9963)<ScrollRestoration>
,使用 pagehide
而不是 beforeunload
。这具有更好的跨浏览器支持,特别是在移动 Safari 上。(#9945)isRouteErrorResponse
中删除 instanceof
检查,以避免服务器上的捆绑问题 (#9930)defer
调用仅包含关键数据并删除 AbortController
的情况 (#9965)File
FormData
条目时发送名称作为值 (#9867)react-router-dom-v5-compat
- 使用 CompatRouter
时修复 SSR useLayoutEffect
console.error
(#9820)完整变更日志:v6.7.0...v6.8.0
日期:2023-01-18
unstable_useBlocker
/unstable_usePrompt
钩子,用于阻止应用程序位置来源内的导航 (#9709,#9932)<Form>
添加 preventScrollReset
属性 (#9886)useBeforeUnload
添加传递事件侦听器选项参数 (#9709)generatePath
(#9764)<Await>
以接受 ReactNode
作为子函数返回结果 (#9896)jsdom
错误解决方法 (#9824)完整变更日志:v6.6.2...v6.7.0
日期:2023-01-09
useId
的一致性 (#9805)完整变更日志:v6.6.1...v6.6.2
日期:2022-12-23
完整变更日志:v6.6.0...v6.6.1
日期:2022-12-21
此次小版本发布主要用于稳定数据路由器的 SSR API,因为我们已将新的 RouterProvider
连接到 Remix 中,作为 React Router-ing Remix 工作的一部分。
createStaticHandler
/createStaticRouter
/StaticRouterProvider
中删除 unstable_
前缀 (#9738)useBeforeUnload()
钩子 (#9664)<Form method>
和 useSubmit
方法值 (#9664)<button formmethod>
表单提交覆盖问题 (#9664)replace
和提交到新路径上的 PUSH
(#9734)errorElement
中使用 useLoaderData
(#9735)StaticRouterProvider
的 Error
对象 (#9664)hydrationData
的 SSR 应用程序的初始滚动恢复 (#9664)完整变更日志:v6.5.0...v6.6.0
日期:2022-12-16
此版本引入了对 可选路由段 的支持。现在,在任何路径段的末尾添加 ?
将使该整个段成为可选的。这适用于静态段和动态参数。
可选参数示例
<Route path=":lang?/about>
将匹配/:lang/about
/about
<Route path="/multistep/:widget1?/widget2?/widget3?">
将匹配/multistep
/multistep/:widget1
/multistep/:widget1/:widget2
/multistep/:widget1/:widget2/:widget3
可选静态段示例
<Route path="/home?">
将匹配/
/home
<Route path="/fr?/about">
将匹配/about
/fr/about
<Route path="prefix-:param">
)进行不正确的匹配,以与 splat 参数的工作方式保持一致。如果您之前依赖于此行为,建议在 useParams
调用站点提取路径的静态部分:(#9506)// Old behavior at URL /prefix-123
<Route path="prefix-:id" element={<Comp /> }>
function Comp() {
let params = useParams(); // { id: '123' }
let id = params.id; // "123"
...
}
// New behavior at URL /prefix-123
<Route path=":id" element={<Comp /> }>
function Comp() {
let params = useParams(); // { id: 'prefix-123' }
let id = params.id.replace(/^prefix-/, ''); // "123"
...
}
action
请求后,在 loader
request
上持久化 headers
(#9721)完整更改日志:v6.4.5...v6.5.0
日期:2022-12-07
GET
请求 (#9680)instanceof Response
检查,转而使用 isResponse
(#9690)URL
创建 (#9682, #9689)requestContext
支持添加到静态处理程序 query
/queryRoute
(#9696)queryRoute(path, routeId)
的不稳定 API 已更改为 queryRoute(path, { routeId, requestContext })
完整更改日志:v6.4.4...v6.4.5
日期:2022-11-30
action
/loader
函数返回 undefined
,则抛出错误,因为重新验证需要知道加载器是否以前已执行。undefined
在 SSR 字符串化以进行水合时也会导致问题。您应始终确保您的 loader
/action
返回一个值,如果不想返回任何内容,则可以返回 null
。(#9511)basename
(#9591)ErrorResponse
主体,以便在内部 403/404/405 场景中包含更具描述性的文本NavLink
和后代 <Routes>
中编码字符的问题 (#9589, #9647)ErrorResponse
实例 (#9593)basename
(#9591)@remix-run/[email protected]
[email protected]
完整更改日志:v6.4.3...v6.4.4
日期:2022-11-01
createHashRouter
时生成正确的 <a href>
值 (#9409)index
路由也具有 path
时,生成正确的 formAction
路径名 (#9486)NavLink
上的 relative=path
属性 (#9453)NavLink
行为 (#9497)useRoutes
在传递 locationArg
时应该能够返回 null
(#9485)createMemoryRouter
中的 initialEntries
类型 (#9498)loader
/action
重定向中的 basename
和相对路由 (#9447)action
函数时忽略无路径的布局路由 (#9455)@remix-run/router
添加 UMD 构建 (#9446)createURL
(#9464)完整更改日志:v6.4.2...v6.4.3
日期:2022-10-06
useFormAction
中尊重 basename
(#9352)IndexRouteObject
和 NonIndexRouteObject
类型,使 hasErrorElement
可选 (#9394)RouteObject
/RouteProps
类型,以便在 TypeScript 中显示错误。(#9366)完整更改日志:v6.4.1...v6.4.2
日期:2022-09-22
完整更改日志:v6.4.0...v6.4.1
日期:2022-09-13
哇,这是一个大版本!6.4.0
将所有数据加载和变异 API 从 Remix 中移植过来。这是一个快速的高级概述,但建议您查看 文档,特别是 功能概述 和 教程。
新的 react-router
API
createMemoryRouter
创建路由器<RouterProvider>
渲染路由器loader
加载数据,并使用路由 action
变异数据errorElement
处理错误defer
和 Await
推迟非关键数据新的 react-router-dom
API
createBrowserRouter
/createHashRouter
创建路由器<Form>
组件提交数据useFetcher()
执行页面内数据加载和变异defer
和 Await
推迟非关键数据<ScrollRestoration>
管理滚动位置<Link relative="path">
执行路径相关的导航 (#9160)useLocation
返回 <Routes location>
组件内的作用域位置 (#9094)<Link replace>
属性,则尊重该属性 (#8779)完整更改日志:v6.3.0...v6.4.0
日期:2022-03-31
完整更改日志:v6.2.2...v6.3.0
日期:2022-02-28
完整更改日志:v6.2.1...v6.2.2
日期:2021-12-17
history
依赖项更新为 5.2.0
。完整更改日志:v6.2.0...v6.2.1
日期:2021-12-17
完整更改日志:v6.1.1...v6.2.0
日期:2021-12-11
HistoryRouter
标记为 unstable_HistoryRouter
,因为此 API 可能需要在新的主要版本发布之前进行更改。完整更改日志:v6.1.0...v6.1.1
日期:2021-12-10
<Outlet>
现在可以接收 context
属性。此值传递给子路由,并可通过新的 useOutletContext
钩子访问。有关详细信息,请参阅 API 文档。(#8461)<NavLink>
现在可以接收一个子函数来访问其属性。(#8164)useMatch
和 matchPath
的 TypeScript 签名。例如,当您调用 useMatch("foo/:bar/:baz")
时,路径将被解析,返回类型将为 PathMatch<"bar" | "baz">
。(#8030)完整变更日志: v6.0.2...v6.1.0
日期: 2021-11-09
<Link>
添加了 reloadDocument
属性。这允许 <Link>
像普通锚标记一样工作,在导航后重新加载文档,同时保持相对 to
解析 (#8283)完整变更日志: v6.0.1...v6.0.2
日期: 2021-11-05
完整变更日志: v6.0.0...v6.0.1
日期: 2021-11-03
React Router v6 发布了!
请阅读 我们的博文以获取有关 v6 中所有优秀功能的更多信息,包括 有关如何从 React Router v5 升级 和 Reach Router 的说明。