React网页定制title

需求

一个使用react+react-router-dom的网页，希望不同的页面能有不同的title

方法一 : useEffect + document.title

• 主要思路: 监听url的变化，然后设置document.title,不同的写法差异主要在如何监听

写法一：useLocation()

• 简易的写法可以看Stack Overflow的这个回答
• 更进一步的写法可以看react-router-dom v6 路由实现动态修改document.title项目中需要在对应的路由界面 设置不同 - 掘金

写法二：useMatches()

• 参考steinybot在Stack Overflow的这个回答

  const matches = useMatches()
  const { handle, data } = matches[matches.length - 1]
  const title = handle && handle.title(data)
  
  useEffect(() => {
    if (title) {
      document.title = title
    }
  }, [title])

• useMatches v6.26.1 | React Router

方法二

• 使用react-helmet-async - npm
• 好处
  1. 代码修改小，只要在需要的地方加上就行
  2. 顺便能把seo也做了
  3. 还能支持Open Graph protocol等协议
• 报错：TypeError: Cannot read properties of undefined (reading 'add')
  • 问题其实出在我没加<HelmetProvider>,但这个报错太不友好了,有个建议优化报错信息的issue，TypeError: Cannot read properties of undefined (reading 'add') thrown when provider is missing · Issue #228 · staylor/react-helmet-async，不过没被处理。
• 参考
  • How to Use React Helmet – With Example Use Case

补充

Open Graph protocol

The Open Graph protocol

Twitter Cards

Getting started with Cards | Docs | Twitter Developer Platform