javascript - 单击“查看页面源代码”时，ReactJS 不显示 HTML

Question

我是ReactJS新手，我想建立一个ReactJS网站并进一步对其实现SEO。在练习时，每当我单击“查看页面源代码”选项时，它不会显示页面的整个 html，而是仅显示 index.html 的内容。

我尝试使用 here, 中的服务器端渲染引用来实现它

但是没有成功。

当我使用 - npm run build && npm run start 构建并运行它时，它会给出错误:-

  <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="79090b16131c1a0d261f0b16170d1c171d394957485749" rel="noreferrer noopener nofollow">[email protected]</a> babel /usr/react_projects/project_frontend
> babel src -d views

 { SyntaxError: /usr/react_projects/project_frontend/src/bundle.js: Unexpected token (8:2)

   6 | const store = configureStore();
   7 | render(
>  8 |   <Provider store={store}>
     |   ^
   9 |     <App />
  10 |   </Provider>,
  11 |   document.querySelector("#app")
  at Parser.raise (/usr/react_projects/project_frontend/node_modules/@babel/parser/lib/index.js:4028:15)
  at Parser.unexpected (/usr/react_projects/project_frontend/node_modules/@babel/parser/lib/index.js:5343:16)
  at Parser.parseExprAtom (/usr/react_projects/project_frontend/node_modules/@babel/parser/lib/index.js:6432:20)
  at Parser.parseExprSubscripts (/usr/react_projects/project_frontend/node_modules/@babel/parser/lib/index.js:6019:21)
  at Parser.parseMaybeUnary (/usr/react_projects/project_frontend/node_modules/@babel/parser/lib/index.js:5998:21)
  at Parser.parseExprOps (/usr/react_projects/project_frontend/node_modules/@babel/parser/lib/index.js:5907:21)
  at Parser.parseMaybeConditional (/usr/react_projects/project_frontend/node_modules/@babel/parser/lib/index.js:5879:21)
  at Parser.parseMaybeAssign (/usr/react_projects/project_frontend/node_modules/@babel/parser/lib/index.js:5826:21)
  at Parser.parseExprListItem (/usr/react_projects/project_frontend/node_modules/@babel/parser/lib/index.js:7111:18)
  at Parser.parseCallExpressionArguments (/usr/react_projects/project_frontend/node_modules/@babel/parser/lib/index.js:6227:22)
pos: 234,
loc: Position { line: 8, column: 2 },
code: 'BABEL_PARSE_ERROR' }
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="067674696c636572596074696872636862463628372836" rel="noreferrer noopener nofollow">[email protected]</a> babel: `babel src -d views`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="91e1e3fefbf4f2e5cef7e3feffe5f4fff5d1a1bfa0bfa1" rel="noreferrer noopener nofollow">[email protected]</a> babel script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/user/.npm/_logs/2018-11-26T04_40_59_532Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ffffde0e5eaecfbd0e9fde0e1fbeae1ebcfbfa1bea1bf" rel="noreferrer noopener nofollow">[email protected]</a> build: `npm run pack && npm run babel`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4a4a6bbbeb1b7a08bb2a6bbbaa0b1bab094e4fae5fae4" rel="noreferrer noopener nofollow">[email protected]</a> build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/user/.npm/_logs/2018-11-26T04_40_59_580Z-debug.log

任何人都可以建议一个更好的方法/教程来实现这一点。

Answer 1

您可以使用react-meta-tags 。它允许您以声明性方式和正常的 jsx 格式添加元标记，这些标记将被移动到 head(检查文档上的服务器使用情况)。

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

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

或者您可以使用 JS 更改 componentDidMount() 方法中的元标记

document.title ="Welcome | here is your page title to display"; 
document.getElementsByTagName("META")[2].content="Your description about the page or site here to set dynamically";