繁体   English   中英

如何更改反应应用程序中的标题和图标?

[英]how to change the title and icon in react app?

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

如果要改标题,可以去: public/index.html ,然后改<title>React App </title>

要更改您的徽标,请转到公共文件夹并更改favicon.ico

如果您按照这些步骤操作,您的徽标和标题将会更改。

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

您可以在 react 项目中更改index.html上的标题和图标。

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

在此处输入图像描述

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>
    );
  }
};

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

 const pageTitle = `${title}`;

然后:

 document.title = pageTitle;

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

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM