如何更改React应用程序中的标题和图标？

Question

我正在制作一个反应应用程序。但在标题栏中，它显示带有 React 徽标的“React App”。我想将其更改为我的网站名称和徽标，我该怎么做？

Answer 1

如果要更改标题，可以前往：

public/index.html

，然后更改

<title>React App </title>

要更改您的徽标，请转到公共文件夹并更改

favicon.ico

。

如果您按照以下步骤操作，您的徽标和标题将会更改。

如果对您有帮助，请标记为已接受答案。

Answer 2

您可以在React项目中更改

public/index.html

上的标题和图标。

<head>
    ...
    ...
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <title>React App</title>
    ...
    ...
</head>

Answer 3

在

public/index.html

中进行更改只会更改默认值（标题和图标），并且将为所有页面设置。有关此方法和官方文档中的一些（复杂）替代方案的更多信息：https://create-react-app.dev/docs/title-and-meta-tags/

...或者您可以使用 React Helmet，这是官方文档中推荐的第三方库：https://github.com/nfl/react-helmet。它将允许您从组件本身设置页面标题/图标/其他

head

元素。

使用 React Helmet 的示例代码：

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/example" />
            </Helmet>
            ...
        </div>
    );
  }
};

Answer 4

您可以通过执行以下操作来更改页面标题。

 const pageTitle = `${title}`;

然后：

 document.title = pageTitle;

Answer 5

您可以从 ./assets/index.htm 更改徽标并更改 href。

并将您的图像输入到./assets/

Answer 6

要更改页面的

Title

和

Icon

，请使用以下步骤

在项目公共文件夹中打开
```
index.html
```
将标题更新为您的项目名称
```
<title>Project Name</title>
```
更改图标
复制您的应用程序徽标并将其重命名为
```
favicon.ico
```
并替换到公共文件夹中
将您的
```
logos.png
```
替换为您的徽标
保存并重新加载应用程序

Answer 7

我刚刚遇到了同样的问题。我已经构建了一个通用网站，并且网站图标的 URL 也存储在数据库中。所以没有机会在 HTML 文件中设置它。

function App(): React.JSX.Element {
  const [config, setConfig] = useState<types.ProjectConfig | null>(null)

  useEffect(() => {
    getProjectConfig().then((config: types.ProjectConfig) => {
      const favicon = document.querySelector("link[rel~='icon']") as HTMLLinkElement
      if (favicon) {
        favicon.href = config.faviconURL // In your case just replace this with the URL in string format
      }
      document.title = config.pageTitle
      setConfig(config)
    })
  }, [])

这对我有用:)

如何更改React应用程序中的标题和图标？

问题描述投票：0回答：7

7个回答

最新问题

如何更改React应用程序中的标题和图标？

问题描述 投票：0回答：7

7个回答

最新问题

问题描述投票：0回答：7