Question

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

我尝试使用here,

的服务器端渲染参考来实现它

但是没有用。

当我使用-npm run build && npm run start进行构建和运行时，显示错误：-

  project_frontend@0.1.0 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! project_frontend@0.1.0 babel: `babel src -d views`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the project_frontend@0.1.0 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! project_frontend@0.1.0 build: `npm run pack && npm run babel`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the project_frontend@0.1.0 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格式来元标记，该元标记将被移到最前面（请检查文档中的服务器使用情况）。

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";

Answer 2

如果您尝试查看页面源，你会看到这个

<body>
    <div id="root"></div>
    <script ........./>
</body>

运行ReactJS开发服务器时，bundle.js会自动编译，并且页面将重新呈现。

您看不到完整页面源的原因很自然。因此，如果您想在浏览器上查看源代码工作，请在浏览器上使用React / Redux开发扩展

单击视图页面后，ReactJS不显示HTML

2 个答案: