ReactJS not displaying the HTML in when clicked on View Page Sorce
Question
I am new to ReactJS, and I want to build a ReactJS website and futher implement SEO to it. While practicing whenever I click to "View Page Source" option, it does not the display whole html of page, instead it only displays content of index.html .
I tried implementing it with server-side rendering reference from here,
but it didn't worked.
When I build and run this with- npm run build && npm run start , it gives error :-
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
Can anyone please suggest a better way/tutorial to implement this.
2 answers
solution1
2 2018-11-26 05:45:26
You can use react-meta-tags . It allows you to meta tags in a declarative way and in normal jsx format, which will be moved to head (Check server usage on the doc).
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>
)
}
}
Or you can use JS to change meta tags inside your componentDidMount() method
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";
solution2
0 2018-11-26 05:19:25
If you try to view page source, you will see this
<body>
<div id="root"></div>
<script ........./>
</body>
when ReactJS dev server runs, the bundle.js is auto-compiled and the page will be re-rendered.
The reason why you can't see full page source is natural. So If you want to see source work on browser, please use React/Redux Development Extension on browser
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.