ReactJS не отображает HTML при нажатии на View Page Sorce

Question

Я новичок в ReactJS и хочу создать веб-сайт ReactJS и в дальнейшем внедрять в него SEO.Практикуя всякий раз, когда я нажимаю на «Просмотр источника страницы», он не отображает весь HTML-код страницы, а отображает только содержимое index.html.

Я пытался реализовать его со ссылкой на серверную отрисовку здесь ,

, но это не сработало.

Когда я собираю и запускаю этос - 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

Вы можете использовать реагировать-метатеги .Это позволяет вам метатеги декларативным способом и в обычном формате 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 Development Extension в браузере