Question

我已经对应用程序运行良好。我想用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);

上面的代码工作正常，但有两个约束：

它仅适用于localhost，即如果myurl="http://localhost:8080/login";更改为myurl="http://192.168.x.x/login";，则无法正常工作。
如果我在react.js中动态加载我的组件，上面的代码即使对于localhost也不起作用。

import Login from './containers/Login';

但是，这并不是：

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

asyncComponent（）的位置是：

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;
    }
  }
);

我正在寻找一些帮助/指导：

如何管理reactjs的SEO页面？ phantom.js是一个可行的解决方案吗？
如何管理重定向，即对于服务器上的请求，我首先将请求重定向到index.html，然后呈现页面。我想在phantom.js中做同样的事情，在重定向后获取页面，这不能正常工作。

Answer 1

以前版本的PhantomJS不支持ES6，请参阅此处的解决方案：https://stackoverflow.com/a/38471938/2715393

或者你可以下载并使用更新的2.5 beta版本和现代Webkit引擎，可以从这里打开ReactJS网站：https://bitbucket.org/ariya/phantomjs/downloads

解析使用phantom.js反应应用程序不加载整页

1 个答案: