ScrollRestoration

框架
数据
声明式

概述

模拟浏览器在位置变化时的滚动恢复。应用应该只渲染一个该组件，放在 Scripts 组件之前。

import { ScrollRestoration } from "react-router";

export default function Root() {
  return (
    <html>
      <body>
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

该组件渲染一个内联的 <script> 标签，以防止滚动闪烁。nonce prop 将会向下传递给 script 标签，以允许 CSP nonce 的使用。

<ScrollRestoration nonce={cspNonce} />

Props

ScriptsProps

几个常用属性

<Scripts crossOrigin> 用于在与您的应用不同的服务器上托管静态资源。
<Scripts nonce> 支持脚本的内容安全策略，并结合 nonce-sources 用于您的 <script> 标签。

您不能传递诸如 async、defer、src、type、noModule 之类的属性，因为它们由 React Router 内部管理。