版本：2.x Docusaurus 客户端 API Docusaurus 在客户端提供了一系列 API，可辅助网站构建。 组件​ ​ ErrorBoundary 组件创建了一个 React 错误边界。使用它可以包裹可能抛出异常的组件，以便在异常发生时显示回退内容，而非导致整个应用崩溃。 import React from 'react';
import ErrorBoundary from '@docusaurus/ErrorBoundary';

const SafeComponent = () => (
fallback={({error, tryAgain}) => (

该组件因以下错误而崩溃：{error.message}。

重试！

)}>


);
提示：点击此处可查看实际效果： 信息：Docusaurus 使用此组件捕获主题布局内部乃至整个应用内的错误。 注意：该组件无法捕获构建时错误，仅保护因使用有状态 React 组件而可能引发的客户端渲染错误。 Props​ fallback：可选的渲染回调，返回一个 JSX 元素。它将接收一个包含两个属性的对象：error（捕获到的错误）和 tryAgain（一个 (() => void) 类型的回调函数，用于重置组件错误并再次尝试渲染）。若未提供该属性，则会渲染 @theme/Error。@theme/Error 用于包裹位于布局上方的站点级错误边界。 警告：fallback prop 是一个回调函数，而非 React 函数组件。因此，不能在该回调中使用 React hooks。 Head 组件是一个可复用的 React 组件，用于管理 document head 的所有变更。它接收纯 HTML 标签并输出纯 HTML 标签，易于初学者上手，本质上是 React Helmet 的封装。 使用示例： import React from 'react';
import Head from '@docusaurus/Head';

const MySEO = () => (






);
嵌套或后定义的组件会覆盖重复使用的项：











输出：



​ 该组件支持链接到内部页面，并内置一项强大的性能特性——预加载。预加载会在用户通过此组件导航前预先获取资源，从而提升加载体验。具体实现上，我们利用 IntersectionObserver 在 进入视口时发起低优先级请求，同时通过 onMouseOver 事件在用户很可能即将跳转时触发高优先级请求。 该组件基于 react-router 的 封装，并添加了 Docusaurus 专属的增强功能。所有 props 均透传给 react-router 的 组件。 外部链接同样适用，并会自动附加这些属性：target="_blank" rel="noopener noreferrer"。 import React from 'react';
import Link from '@docusaurus/Link';

const Page = () => (

Check out my blog!

Follow me on X!

);
to: string​ 要导航到的目标位置，例如：/docs/introduction。
提示：建议使用该组件而非原生 标签，因为使用 时 Docusaurus 会执行大量优化，例如检测无效路径、预取资源及应用基础 URL 等。 ​ 渲染 后，浏览器将导航至新位置。新位置会在历史记录堆栈中覆盖当前位置，机制类似于服务端重定向（HTTP 3xx）。更多可用 props 请参阅 React Router 的 Redirect 文档。 使用示例： import React from 'react';
import {Redirect} from '@docusaurus/router';

const Home = () => {
return ;
};
提示：@docusaurus/router 基于 React Router 实现，并支持其各项特性。 组件让 React 组件只在浏览器中渲染，且要等 React 应用完成 hydration 之后才会执行。 提示：如果代码需要访问 window 或 document 对象、无法在 Node.js 中运行，可以用它来集成。 属性： children：一个渲染函数，返回仅在浏览器中渲染的 JSX，在 Node.js 中不会执行。 fallback（可选）：在服务端（Node.js）以及 React hydration 完成前渲染的 JSX。 代码示例： import BrowserOnly from '@docusaurus/BrowserOnly';

const MyComponent = () => {
return (

{() => page url = {window.location.href}}

);
};
集成第三方库的示例： import BrowserOnly from '@docusaurus/BrowserOnly';

const MyComponent = (props) => {
return (
Loading...