Question

我收到以下错误消息Warning: React can't find the root component node for data-reactid value .s1zxtf8oao.1.0.1.0. If you're seeing this message, it probably means that you've loaded two copies of React on the page. At this time, only a single copy of React can be loaded at a time.

当您点击该特定路线时，我有一条路由，即异步获取和加载数据服务器端。你第一次上路，一切都很好。当我刷新页面时，就是抛出错误并且它破坏了应用程序。

routes.js：

const getTemplates = async (location, callback) => {
      await TemplateActions.getTemplates();
      callback(null, () => <TemplatePage />)
    }

    const getQuestions = async (location, callback) => {
      await QuestionActions.getQuestions();
      callback(null, () => <QuestionPage />)
    }

    export default (
      <Route>
        <Route path="/" component={App}>
          <IndexRoute getComponent={getContextComponent} />
          <Route path="login" component={LoginPage} />
          <Route path="templates" getComponent={getTemplates} />
          <Route path="questions" getComponent={getQuestions} />
        </Route>
        <Route path="*" component={NotFoundPage} />
      </Route>
    );

App.js：

import React, { Component, PropTypes } from 'react';
var injectTapEventPlugin = require("react-tap-event-plugin");
import s from './App.scss';
import Header from '../Header';
import Footer from '../Footer';

injectTapEventPlugin();
class App extends Component {

  static propTypes = {
    children: PropTypes.element.isRequired,
    error: PropTypes.object,
  };

  static contextTypes = {
    insertCss: PropTypes.func,
  };

  componentWillMount() {
    this.removeCss = this.context.insertCss(s);
  }

  componentWillUnmount() {
    this.removeCss();
  }

  render() {
    return !this.props.error ? (
      <div>
        <Header />
        {this.props.children}
        <Footer />
      </div>
    ) : this.props.children;
  }

}

export default App;

一块server.js：

server.get('*', async (req, res, next) => {
  try {
    match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
      if (error) {
        throw error;
      }
      if (redirectLocation) {
        const redirectPath = `${ redirectLocation.pathname }${ redirectLocation.search }`;
        res.redirect(302, redirectPath);
        return;
      }
      let statusCode = 200;
      const data = { title: '', description: '', css: '', body: '', entry: assets.main.js };
      const css = [];
      const context = {
        insertCss: styles => css.push(styles._getCss()),
        onSetTitle: value => data.title = value,
        onSetMeta: (key, value) => data[key] = value,
        onPageNotFound: () => statusCode = 404,
      };

      const iso = new Iso();

      iso.add(
          ReactDOM.renderToString(
              <ContextHolder context={context}>
                  <RouterContext {...renderProps}/>
              </ContextHolder>
          ),
          alt.flush()
      );
      data.body = iso.render();
      data.css = css.join('');

      const html = ReactDOM.renderToStaticMarkup(<Html {...data} />);
      res.status(statusCode).send(`<!doctype html>\n${html}`);
    });
  } catch (err) {
    next(err);
  }
});

Universal React无法找到根组件

0 个答案: