Reactjs 使用phantom.js解析react应用程序未加载整个页面

我的应用程序运行得很好。我想使用

phantom.js

进行搜索引擎优化。在phantom.js的帮助下，我希望将我的页面存储在某个地方，每当搜索机器人发出请求时，我都希望为他们提供这些保存的页面

phantom.js代码是：

var page;
var myurl="http://localhost:8080/login"; 

var renderPage = function (url) {
    page = require('webpage').create();
    page.settings.userAgent = 'Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1';


    page.onNavigationRequested = function(url, type, willNavigate, main) {
        if (main && url!=myurl) {
            myurl = url;
            console.log("redirect caught");
            page.close()
            renderPage(url);
        }
    };
page.open(url, function (status) {

    if (status !== 'success') {
        console.log('Unable to load the address!');
        phantom.exit();
    } else {
        window.setTimeout(function () {
            console.log(page.content);
            phantom.exit();
        }, 1000); // Change timeout as required to allow sufficient time 
    }
});

    // page.open(url, function(status) {
    //     console.log(status);
    //     if (status==="success") {
    //         console.log("success")
    //         console.log(page.content);
    //             // page.render('yourscreenshot.png');
    //             phantom.exit(0);
    //     } else {
    //         console.log("failed")
    //             phantom.exit(1);
    //     }
    // });
} 

renderPage(myurl);

上述代码工作正常，但有两个限制：

它只在本地主机上工作，即如果

myurl=”http://localhost:8080/login";更改为
myurl=”http://192.168.x.x/login";，它不工作

如果我在react.js中动态加载我的组件，则上述代码不起作用，即使对于localhost也是如此

e、 g.这样做很好：

import Login from './containers/Login';

但是，这并不是：

const login = asyncComponent(() => import('./containers/login')
  .then(module => module.default), { name: 'login' });

其中asyncComponent（）是：

从“React”导入React；
导出默认值（加载程序、集合）=>(
类AsyncComponent扩展了React.Component{
建造师（道具）{
超级（道具）；
this.Component=null；
this.state={Component:AsyncComponent.Component}；
}
组件willmount（）{
如果（！this.state.Component）{
加载器（）。然后（（组件）=>{
AsyncComponent.Component=组件；
this.setState（{Component}）；
});
}
}
render（）{
if（this.state.Component）{
返回(
)
}
返回null；
}
}
);

我正在寻求以下方面的帮助/指导：

如何管理reactjs的SEO页面？phantom.js是可行的解决方案吗

如何管理重定向，即对于服务器上的请求，我首先将请求重定向到index.html，然后呈现页面。我想在phantom.js中做同样的事情，在重定向后获取页面，这是不正常的

---

PhantomJS的早期版本不支持ES6，请参见此处的解决方案：

或者，您也可以下载并使用更新的2.5测试版和现代Webkit引擎，从这里可以很好地打开ReactJS站点：

import React from 'react';

export default (loader, collection) => (
  class AsyncComponent extends React.Component {
    constructor(props) {
      super(props);

      this.Component = null;
      this.state = { Component: AsyncComponent.Component };
    }

    componentWillMount() {
      if (!this.state.Component) {
        loader().then((Component) => {
          AsyncComponent.Component = Component;

          this.setState({ Component });
        });
      }
    }

    render() {
      if (this.state.Component) {
        return (
          <this.state.Component { ...this.props } { ...collection } />
        )
      }

      return null;
    }
  }
);