<div style="display: none;" hidden="true" aria-hidden="true" data-nosnippet>Are you an LLM? You can read better optimized documentation at /pages/a9bba7.md for this page in Markdown format</div>

⽤useRef实现useDocumentTitle - useRef与Hook 闭包详解

闭包与React hook 可看我另外一篇文章《react hook 与 闭包》

// src/screens/project-list/index.tsx
import { useDebounce, useDocumentTitle } from "../../utils";

...
export const ProjectListScreen = () => {
  useDocumentTitle('项目列表', false)
  ...
  
  
  
// src/utils/index.ts
export const useDocumentTitle = (
  title: string,
  keepOnUnmount: boolean = true
) => {
  const oldTitle = useRef(document.title).current;
  // 页面加载时: 旧title
  // 加载后：新title
  useEffect(() => {
    document.title = title;
  }, [title]);

  useEffect(() => {
    return () => {
      if (!keepOnUnmount) {
        // 如果不指定依赖，读到的就是旧title
        document.title = oldTitle;
      }
    };
  }, [oldTitle, keepOnUnmount]);
};

添加项目列表和项目详情路由

安装react-router

yarn add react-router -S

使用

// src/authenticated-app.tsx
import { Routes, Route } from "react-router";

...
export const AuthentictedApp = () => {
  return (
    <Container>
      <PageHeader></PageHeader>
      <Routes>
        <Route path='/project' element={<ProjectListScreen />} />
        <Route path='/project/:projectId/*' element={<ProjectScreen />} />
      </Routes>
    </Container>
  );
};
...

新增项目详情页面

// src/authenticated-app.tsx
...
import { ProjectScreen } from "screens/project";
...


// src/screens/project/index.tsx
import React from "react"

export const ProjectScreen = () => {
    return <div>project</div>
}