关于reactjs：为什么react-snap仅在SPA应用程序中预渲染主页？


why react-snap only pre-render main page in SPA application?

我有一个基于react和react-router-4的简单项目SPA应用程序，我的项目中有多个路由，例如：

  • www.mySite / build /＃/
  • www.mySite / build /＃/ page1 / page12
  • www.mySite / build /＃/ page2

当我使用react-snap预先渲染我的项目并在浏览器中打开路线时，仅预渲染了主要路线(www.mySite / build /＃/)，因此Google机器人无法抓取其他路线和页面。

我的package.json配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
{
 "name":"react-boilerplate",
 "version":"1.0.0",
 "description":"",
 "main":"index.js",
 "scripts": {
   "start":"webpack-dev-server --mode development --open --hot",
   "build":"webpack --mode production",
   "postbuild":"react-snap"
  },
 "keywords": [],
 "author":"",
 "license":"ISC",
 "devDependencies": {
   "@babel/core":"^7.1.2",
   "@babel/preset-env":"^7.1.0",
   "@babel/preset-react":"^7.0.0",
   "babel-loader":"^8.0.4",
   "css-loader":"^1.0.0",
   "html-webpack-plugin":"^3.2.0",
   "react-snap":"^1.23.0",
   "style-loader":"^0.23.0",
   "webpack":"^4.20.2",
   "webpack-cli":"^3.1.1",
   "webpack-dev-server":"^3.1.14"
  },
 "dependencies": {
   "react":"^16.5.2",
   "react-dom":"^16.5.2",
   "react-redux":"^7.1.0",
   "react-router":"^5.0.1",
   "react-router-dom":"^5.0.1",
   "redux":"^4.0.4"
  }
}

我的webpack配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry:"./src/index.js",
  output: {
    path: path.join(__dirname,"/build"),
    filename:"index-bundle.js"
  },
  module: {
    rules: [
      {
        test: /\\.js$/,
        exclude: /node_modules/,
        use: ["babel-loader"]
      },
      {
        test: /\\.css$/,
        use: ["style-loader","css-loader"]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template:"./src/index.html"
    })
  ]
};

index.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import React from"react";
import {Route, HashRouter as Router, Switch} from 'react-router-dom';
import App from"./components/App.js";
import Page1 from"./components/Page1";
import Page12 from"./components/Page12";
import Page2 from"./components/Page2";
import { hydrate, render } from"react-dom";

const route = (
    <Router>
        <Switch>
            <Route exact path="/" component={App}/>
            <Route exact path="/page1" component={Page1}/>
            <Route exact path="/page1/page12" component={Page12}/>
            <Route exact path="/page2" component={Page2}/>
        </Switch>
    </Router>
);



const rootElement = document.getElementById("root");

if (rootElement.hasChildNodes()) {
    hydrate(route, rootElement);
} else {
    render(route, rootElement);
}

App.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import React, { Component } from"react";

import '../styles/App.css';

import {NavLink} from 'react-router-dom';

class App extends Component {
    render() {
        return (
           
                My React App!
<br/>
                <NavLink  exact to="/page1">???? 1</NavLink>
                <br/>
                <NavLink  exact to="/page1/page12">???? 12</NavLink>
                <br/>
                <NavLink   exact to="/page2">???? 2</NavLink>
                <br/>

           
        );
    }
}


export default (App);

第1页中的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React, { Component } from"react";

class Page1 extends Component {
    render() {
        return (
           
                we are in page1
           
        );
    }
}


export default(Page1);

其他页面如第1页。

Google漫游器将忽略您网址中#之后的网址内容，从而导致

www.mySite/build/#/page1/page12 => www.mySite/build/#/

为了使您的预渲染工作正常进行，您可能需要删除URL中的#，并使其像www.mySite/build/page1/page12

请参见：如何从react-router中的URL中删除哈希