What is the purpose of react-helmet?

问题

I've created a server-side react app, where it would return html as shown below:

const html = renderToString(<App />);
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>A Cool Page</title>
    <link rel="stylesheet" href="${ROOT}/static/index.css">
  </head>
  <body>
    <div id="root">${html}</div>
    <script src="${ROOT}/client-bundle.js"></script>
  </body>
</html>

I read a lot of people have been using react-helmet to manage the content in head. I'm wondering what's the benefit of using it, when I can just directly include as shown above.

回答1:

A major benefit or react-helmet is when you have multiple components in a tree with <head> tags, and you have <meta> tags with the same attributes/values.

For instance, if on your index page component you have:

const html = renderToString(<App />);
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="This is the index page description"> 
    <title>A Cool Index Page</title>
  </head>
</html>

But then on a leaf page component, you also have a <head> tag containing meta tags:

<html>
  <head>
    <meta name="description" name="This is the unique leaf page description"> 
    <title>A Cool Leaf Page</title>
    <link rel="stylesheet" href="${ROOT}/static/index.css">
  </head>
</html>

Notice between our two page components there are two meta tags with the same attribute value name="description" in our tree. You might think this could lead to duplication, but react-helmet takes care of this problem.

If someone ends up on the leaf page, react-helmet overrides the index/site-level description meta tag and renders the lower-level one, the one specifically for the leaf page.

It will also contain the viewport meta tag, since it did not have to be overwritten.

Because of react-helmet, on the leaf page, the <head> would appear as follows:

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" name="This is the unique leaf page description"> 
    <title>A Cool Leaf Page</title>
    <link rel="stylesheet" href="${ROOT}/static/index.css">
  </head>
</html>

回答2:

react-helmet allows to set meta tags that will be read by search engines and social media crawlers. This makes server-side rendering and React Helmet a dynamic duo for creating apps that are SEO and social media friendly.

eg:

import { Helmet } from 'react-helmet';

<Helmet>
    <title>Turbo Todo</title>
    <meta name="description" content="test on react-helmet" />
    <meta name="theme-color" content="#ccc" />
</Helmet>

回答3:

Both methods should work. But with react-helmet, the head is also treated as a component and is more react-like. Also, although it's unusual, you may bind some props or states with the meta-data to implement a dynamic head. One scenario is switching between different languages.

回答4:

React Helmet also allow you to modify classes outside the scope of your render function.

For example, if you want to modify your <body> tag dynamically, you could do the following:

<Helmet>
    <body className="dynamic-class-for-body-on-this-view" />
</Helmet>

回答5:

React Helmet is a reusable React component that will manage all of your changes to the document head. For example, if you want to change the Title and Description of every page according to your SEO, you could do the following:

<Helmet>
            <title>Your Tiltle</title>
            <meta name="description" content="Description of your page" />
</Helmet>

来源：https://stackoverflow.com/questions/52690820/what-is-the-purpose-of-react-helmet

标签

reactjs

react-helmet