2018年06月13日

Reactのreact-helmet-asyncでhead情報を挿入

react-helmet-asyncを利用するとhead内に様々な情報を挿入できる


import * as React from "react";
import { render } from "react-dom";
import Helmet, { HelmetProvider } from "react-helmet-async";

import Hello from "./Hello";

const styles = {
fontFamily: "sans-serif",
textAlign: "center"
};

const App = () => (
<HelmetProvider>
<div style={styles}>
<Helmet>
<title>Hello World!!</title>
<link rel="canonical" href="https://www.tacobell.com/" />
</Helmet>
<Hello name="CodeSandbox" />
<h2>Start editing to see some magic happen {"\u2728"}</h2>
</div>
</HelmetProvider>
);

render(<App />, document.getElementById("root"));


HelmetProviderで包んでおけばHelmetで包んだ要素内でhead要素に入れることができる
posted by ねこまんま at 01:08 | Comment(0) | React | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。