Question

我有一个使用https://facebook.github.io/create-react-app/docs/getting-started和 npx create-react-app my-app 命令创建的react.js网站。建立网站后，我的应用程式中有很多页面，当我用google chrome打开渲染的源代码时。问题是所有页面都放在一个 bundle.js 中，包括所有页面的所有文本和HTML元素都在该文件中。有人知道如何单独获取所有页面的源代码中的HTML，而不是仅包含所有页面内容的 bundle.js 吗？

因此其他页面可以被Google单独编入索引吗？

我希望有人知道如何使它工作。如果有npm插件或示例站点可用，请发布链接。我真的好几个星期都找不到解决方案，我只是在导出的HTML文件中看到一个 bundle.js ，其中包含所有页面的所有文本和图像以及HTML元素，我如何将其呈现为html输出，而不只是将所有 bundle.js 全部用于索引编制？

顺便说一句：我的应用使用了'react-router-dom'，我不想破坏页面的路由，但是可以将页面分别编入索引。

下面是示例代码

App.js

//App.js
import React, { Component } from 'react';
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom';


import Nav from './components/nav';
import Header from './components/header';
import Footer from './components/footer';

import home from './components/pages/home';
import about from './components/pages/about';
import contact from './components/pages/contact';

class App extends Component {
render() {
    return (
    <Router>
    <div className="App">
        <Nav/>
        <Header/>
        <Route exact path="/" component={home} />
        <Route exact path="/about" component={about} />
        <Route exact path="/contact" component={contact} /> 
        <Footer/>
    </div>
    </Router>

    );
}
}

export default App;

home.js

//home.js
import React, { Component } from 'react';

class home extends Component {
render() {
    return (
    <div className="container">
        <p>content...</p>
    </div>
    );
}
}

export default home;

ReactJS渲染不同页面的html

0 个答案: