如何在React JS中动态更改网站标题也在源代码中？

问题描述

我尝试了react-helmet。我使用了React路由器，并且想在路线改变时更改标题。使用react-helmet，我可以在选项卡和控制台中更改标题，但遗憾的是在源文件中无法更改。我也想在源代码中更改标题，因为这对于SEO非常重要。 在/public/index.html

中

res.show()

+---+--------+--------+-------+-------+
| ID|Category|    Date|Points1|Points2|
+---+--------+--------+-------+-------+
|123|       A| 3312019|     40|     20|
|123|       B| 5302020|     10|     90|
|123|       D| 5302020|      0|     80|
|123|       A|12312019|     20|     10|
|123|       B|12312019|      0|     10|
|123|       B| 3312019|     60|     60|
+---+--------+--------+-------+-------+

在src / app.js中

<title>My Title</title>
<Meta name="description" content="This is main page"/>

在Home.js中

import React from 'react';
import {
  browserRouter as Router,Switch,Route,Link
} from "react-router-dom";
import {Helmet} from "react-helmet";
import Home from './Components/Pages/Home/';

function App() {
  return (
   <Router>
    <Helmet>
         <Meta charset="utf-8" />
   <title>My title</title>
   <Meta name="description" content="This is main page" />
        </Helmet>
      <Switch>
        <Route path="/home">
          <Home></Home>
        </Route>
        </Switch>
        </Router>
        );
        }
        export default App;

解决方法

如果您正在寻找SEO，那么create-react-app不是这里的解决方案。 即使您在社交媒体上共享页面，它也不会显示元数据。 您必须为此进行服务器端渲染。要了解有关服务器端渲染的信息，请在此处进行检查

https://medium.com/@yudhajitadhikary/client-side-rendering-vs-server-side-rendering-in-react-js-next-js-b74b909c7c51

,

您只需执行document.title = '...'即可更改标题。

我将每个顶级组件都放在useEffect中。

Google和Bing评估JS，因此在JS中设置标题不会给SEO带来不利。但是，其他搜索引擎也可以。

,

您应该在react（useContext hook）中使用上下文，并在每个页面中都将在名为pageTitle的变量中设置该标题在应用程序上下文中声明的内容最后，您可以使用头盔包并将其放在您的title标签中

,

import React from "react";
 
class Application extends React.Component {
   state={
   title:"dynamic title"
  }
  componentDidMount(){
    document.title = this.state.title
  }
  render () {
    return (
        <div className="homePage"></div>
    );
  }
}

,

使用React头盔更改您的网站标题说明。它还有助于SEO。 https://www.npmjs.com/package/react-helmet

import React from "react";
import {Helmet} from "react-helmet";
 
class Application extends React.Component {
  render () {
    return (
        <div className="application">
            <Helmet>
                <meta charSet="utf-8" />
                <title>My Title</title>
                <link rel="canonical" href="http://example.com" />
            </Helmet>
            ...
        </div>
    );
  }
};