ReactJS: Cách thiết lập nội dung động cho title và meta với react-meta-tags

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Xử lý thẻ <title> và thẻ <meta> trong React là một việc khó. Có một số mô-đun khác cũng trợ giúp điều này như react-helmet và react-document-meta, nhưng chúng yêu cầu định nghĩa các thẻ <title> và <meta> trong một đối tượng cụ thẻ. react-meta-tags cho phép bạn viết các thẻ đó theo cách khai báo và ở định dạng jsx bình thường.

Cài đặt

npm install react-meta-tags --save

Hoặc tải phiên bản development và production đã biên dịch từ ./dist

Sử dụng

Sử dụng component MetaTag

import React from 'react';
import MetaTags from 'react-meta-tags';

class Component1 extends React.Component {
  render() {
    return (
        <div className="wrapper">
          <MetaTags>
            <title>Page 1</title>
            <meta name="description" content="Some description." />
            <meta property="og:title" content="MyApp" />
            <meta property="og:image" content="path/to/image.jpg" />
          </MetaTags>
          <div className="content"> Some Content </div>
        </div>
      )
  }
}

Lưu ý: Xác định id trên các thẻ để nếu bạn điều hướng đến trang khác, các thẻ meta cũ hơn sẽ bị xóa và thay thế bằng các thẻ mới.

Sử dụng component ReactTitle

Nếu bạn chỉ muốn thêm tiêu đề trên một trang, bạn có thể sử dụng ReactTitle để thay thế.

import React from 'react';
import {ReactTitle} from 'react-meta-tags';

class Component2 extends React.Component {
  render() {
    return (
        <div className="wrapper">
          <ReactTitle title="Page 2"/>
          <div className="content"> Some Content </div>
        </div>
      )
  }
}

Ví dụ về sử dụng máy chủ

import MetaTagsServer from 'react-meta-tags/server';
import {MetaTagsContext} from 'react-meta-tags';
/** Import những module khác nếu muốn ở đây **/

/*
------
  một số code ở đây nếu có
------
*/

app.use((req, res) => {
  //make sure you get a new metatags instance for each request
  const metaTagsInstance = MetaTagsServer();

  //react router match
  match({
    routes, location: req.url
  }, (error, redirectLocation, renderProps) => {
    let reactString;

    try{
      reactString = ReactDomServer.renderToString(
      <Provider store={store}> {/*** If you are using redux ***/}
      {/* Bạn phải truyền extract thông qua MetaTagsContext để nó có thể bắt các thẻ meta */}
        <MetaTagsContext extract = {metaTagsInstance.extract}>
          <RouterContext {...renderProps}/>
        </MetaTagsContext>
      </Provider>
      );
    }
    catch(e){
      res.status(500).send(e.stack);
      return;
    }

    //gộp lại thành một chuỗi
    const meta = metaTagsInstance.renderToString();

    //nạp chuỗi metatag tới layout
    const htmlStr = (`
      <!doctype html>
      <html lang="en-us">
        <head>
          <meta charSet="utf-8"/>
          ${meta}
        </head>
        <body>
          <div id="content">
            ${reactString}
          </div>
        </body>
      </html>  
    `);

    res.status(200).send(layout);
  });
});

Như vậy, theo đoạn mã trên, chúng ta phải làm như sau để hiển thị title và meta ở máy chủ:

  1. Import MetaTagsServer và MetaTagsContext
  2. Tạo một phiên bản mới của MetaTagsServer
  3. Gộp component của bạn bên trong MetaTagsContext và extract như là các prop
  4. Trích xuất chuỗi meta bằng cách sử dụng renderToString của phiên bản MetaTagsServer
  5. Nối chuỗi meta vào mẫu html của bạn.

Bố cục JSX

Bạn cũng có thể sử dụng React để xác định bố cục của mình, trong trường hợp đó, bạn có thể sử dụng phương thức getTags từ metaTagsInstance. Phần bố cục của ví dụ phía trên máy chủ sẽ trông như thế này.

//gộp các title và meta thành các phần tử React
const metaTags = metaTagsInstance.getTags();

//nạp chuỗi metatag tới layout
const layout = (
  <html lang="en-us">
    <head>
      <meta charSet="utf-8"/>
      {metaTags}
    </head>
    <body>
      <div id="app" dangerouslySetInnerHTML={{__html: reactString}} />
    </body>
  </html>  
);

const htmlStr = ReactDomServer.renderToString(layout);

res.status(200).send(htmlStr);

Tính duy nhất của thẻ meta

  • Mô-đun xác định duy nhất thẻ meta theo thuộc tính id/property/name/itemProp.
  • Nhiều thẻ meta có cùng thuộc tính / tên hợp lệ trong html. Nếu bạn cần trường hợp như vậy. Xác định một id khác cho cả hai để có thể phân biệt tính duy nhất.
  • Bạn nên cung cấp một id để nếu khóa meta là khác thì property/name/itemProp sẽ xác định duy nhất chúng.
» Tiếp: Cách thêm thẻ meta động vào ứng dụng React với react-snapshot kết hợp với react-helmet
« Trước: Cách cấu hình thẻ meta và title động trong React với Helmet và với server Node.js
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!