Server

HttpStatusCode

编辑此页面

HttpStatusCode 在服务器端渲染时为页面响应设置 HTTP 状态码。

import { HttpStatusCode } from "@solidjs/start";


<HttpStatusCode code={404} />;

为未匹配路由设置 404 状态码

在页面渲染过程中，你可能想根据具体情况为 Response 设置状态码。 HttpStatusCode 组件通过接收传入的 code 并将其设置为浏览器中的 Response 状态来实现这一功能。

由于 HttpStatusCode 只是一个组件，它可以与 ErrorBoundary、Show、Switch 或其他任何 JSX 控制流组件一起使用。 这意味着用于决定渲染内容的逻辑可以同时用于设置状态码，使这些逻辑能够放在一起。

状态码对于缓存和 SEO 等功能来说是重要的工具，因此发送有意义的状态码是一个好的实践。 例如，对于 NotFound 页面，你应该发送 404 状态码。

routes/*404.tsx
import { HttpStatusCode } from "@solidjs/start";


export default function NotFound() {
  return (
    <div>
      <HttpStatusCode code={404} />
      <h1>页面未找到</h1>
    </div>
  );
}

为动态路由中的缺失页面设置 404 状态码

在使用动态路由参数时，如果某个段的给定参数指向缺失的资源，设置 404 状态码是很重要的。 通常，在使用该参数进行异步请求时会发现参数缺失。

可以从这些获取器内部抛出错误，并由访问数据位置最近的 <ErrorBoundary> 组件捕获。 <HttpStatusCode> 与错误边界配合得很好，因为你可以在 ErrorBoundary 的 fallback 中检查错误。 如果获取器抛出表示数据未找到的错误，你可以渲染 <HttpStatusCode code={404} />。

注意，当流式响应 renderStream 时，HTTP 状态只有在流首次刷新之前添加才能被包含。 对于需要在响应之前加载的任何资源调用，添加 deferStream 很重要。

routes/[house].tsx
import { Show, ErrorBoundary } from "solid-js";
import { query, createAsync } from "@solidjs/router";
import { HttpStatusCode } from "@solidjs/start";


const getHouse = query(async (house: string) => {
  if (house != "gryffindor") {
    throw new Error("House not found");
  }
  return house;
}, "house");


export default function House(props: { name: string }) {
  const house = createAsync(() => getHouse(props.name), { deferStream: true });
  return (
    <ErrorBoundary
      fallback={(e) => (
        <Show when={e.message === "House not found"}>
          <HttpStatusCode code={404} />
        </Show>
      )}
    >
      <div>{house()}</div>
    </ErrorBoundary>
  );
}

参数

属性类型描述
codenumberHTTP 状态码
报告此页面问题