60 votes

Quel est le but de React-Helmet?

J'ai créé une application de réaction côté serveur, où elle renverrait du code HTML comme indiqué ci-dessous:

 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>

J'ai lu que beaucoup de gens utilisaient react-casque pour gérer le contenu en tête. Je me demande quel est l'avantage de l'utiliser, alors que je peux simplement l'inclure directement comme indiqué ci-dessus.

21voto

Sajin M Aboobakkar Points 1812

react-casque permet de définir des balises meta qui seront lues par les moteurs de recherche et les robots d'exploration des réseaux sociaux. Cela fait du rendu côté serveur et de React Helmet un duo dynamique pour créer des applications compatibles avec le référencement et les médias sociaux.

par exemple:

 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>

6voto

Van Points 1812

Les deux méthodes devraient fonctionner. Mais avec le casque de réaction, la tête est également traitée comme un composant et ressemble plus à une réaction. De plus, bien que ce soit inhabituel, vous pouvez lier certains accessoires ou états avec les méta-données pour implémenter une tête dynamique. Un scénario consiste à basculer entre différentes langues.

3voto

Alber Erre Points 36

React Helmet vous permet également de modifier des classes en dehors de la portée de votre fonction de rendu .

Par exemple, si vous souhaitez modifier <body> , vous pouvez effectuer les opérations suivantes:

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

3voto

Raghav Jindal Points 29

React Helmet est un composant React réutilisable qui gérera toutes vos modifications apportées à l'en-tête du document.

Par exemple, si vous souhaitez modifier le titre et la méta description de chaque page en fonction de votre référencement, vous pouvez procéder comme suit:

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X