Question

和首页一样，详情页也包含数据请求、UI 组件和样式代码三个文件。

数据请求代码文件的命名和首页一样，都是 fetch.ts。与首页不同的是，详情页我们需要从上下文（服务端渲染场景）或 URL 中（浏览器场景）获取到文章 ID，然后根据文章 ID 获取文章详情数据。代码如下：

import { RouteComponentProps } from "react-router";
export default async (ctx) => {
  let data;
  if (__isBrowser__) {
  const id = (ctx as RouteComponentProps<{ id: string }>).match.params.id;
  data = await (await window.fetch(`/api/detail/${id}`)).json()
  } else {
  const id = /detail\/(.*)(\?|\/)?/.exec(ctx.req.path)[1];
  data = await ctx.apiDeatilservice.index(id);
  }

  return {
  detailData: data,
  };
};

详情页的 UI 组件名称为 render$id.tsx 的文件， $id 表示该组件的参数是 id，这样访问 /detail/ 这个路由（id 是变量）时，就会匹配到 web/pages/detail/render$id.tsx 这个页面了。

render$id.tsx 详细代码如下：

import React, { useContext } from "react";
import { IContext, SProps } from "ssr-types";
import { Data } from "@/interface";
import Navbar from "@/components/navbar";
import Content from "@/components/content";
import Title from "@/components/title";
import Tip from "@/components/tip";
import styles from "./index.less";
export default (props: SProps) => {
  const { state } = useContext<IContext<Data>>(window.STORE_CONTEXT);
  return (
  <div>
  <Navbar {...props}></Navbar>
  <div className={styles.container}>
  <Title>{state?.detailData?.title}</Title>
  <Tip
    date={state?.detailData?.date}
    wordCount={state?.detailData?.wordCount}
    readingTime={state?.detailData?.readingTime}
  />
  <Content>{state?.detailData?.content}</Content>
  </div>
  </div>
  );
};

详情页的 UI 组件由四部分组成。

• Navbar：导航条。
• Title：文章标题。
• Tip：文章发布时间、字数等提示。
• Content：文章内容。