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

补充

需求¶

方法一 : useEffect + document.title¶

写法一：useLocation()¶

写法二：useMatches()¶

方法二¶

补充¶

Open Graph protocol¶

Twitter Cards¶

生成¶

需求

方法一 : useEffect + document.title

写法一：useLocation()

写法二：useMatches()

方法二

补充

Open Graph protocol

Twitter Cards

生成