禁用 JavaScript

您是否曾经浏览您网站上的页面，然后想“我们为什么要加载所有这些 JavaScript？这个页面上除了链接什么都没有！”对于一个 JavaScript 框架来说，这可能看起来有点奇怪，但是您可以轻松地使用一个布尔值关闭 JavaScript，您的数据加载、链接，甚至表单仍然可以工作。

以下是我们喜欢的方式

打开您想要包含 JavaScript 的每个路由模块，并添加一个“handle”。这是一种让您向父路由提供有关路由的任何类型元信息的方式（您稍后会看到）。

export const handle = { hydrate: true };

现在打开 root.tsx，引入 useMatches 并添加以下内容

import {
  Meta,
  Links,
  Scripts,
  Outlet,
  useMatches,
} from "@remix-run/react";

export default function App() {
  const matches = useMatches();

  // If at least one route wants to hydrate, this will return true
  const includeScripts = matches.some(
    (match) => match.handle?.hydrate
  );

  // then use the flag to render scripts or not
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        {/* include the scripts, or not! */}
        {includeScripts ? <Scripts /> : null}
      </body>
    </html>
  );
}

您的所有数据加载仍然可以在服务器渲染上工作，并且您的所有 <Link> 都会在底层渲染普通的 <a>，因此它们将继续工作。

在任何页面上的任何时候，您都可以在纯 HTML 和完整的客户端过渡之间切换。

如果您需要一小部分交互性，请使用 <script dangerouslySetInnerHTML>。

return (
  <>
    <select id="qty">
      <option>1</option>
      <option>2</option>
      <option value="contact">
        Contact Sales for more
      </option>
    </select>

    <script
      dangerouslySetInnerHTML={{
        __html: `
          document.addEventListener('DOMContentLoaded', () => {
            document.getElementById('qty').onchange = (event) => {
              if (event.target.value === "contact") {
                window.location.assign("/contact")
              }
            }
          });
        `,
      }}
    />
  </>
);