ReactRouter:警告:React.createElement:type不应为null,未定义

时间:2015-12-26 09:21:56

标签: node.js reactjs react-router

警告为Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).

然后在Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

时抛出错误renderToString

整个代码是:

import { renderToString } from 'react-dom/server';
import * as React from "react";
import * as ReactDOM from "react-dom";

let History = require("history");
let ReactRouter = require("react-router");

let match = ReactRouter.match;
let RouterContext = ReactRouter.RouterContext;
let Route = ReactRouter.Route;
let Router = ReactRouter.Router;
let Link = ReactRouter.Link;

let TestComponent = React.createClass({
    render: function() {
        return (
            <button>test</button>
        );
    }
});

console.log(renderToString(<TestComponent/>));// a

let routes = [
    <Route path="/" component={TestComponent}/>
];

match({ routes, location: "/" }, (error, redirectLocation, renderProps) => {
    if (error) {
        console.log(error);
        return;
    }
    if (redirectLocation) {
        console.log(redirectLocation);
        return;
    }
    if (renderProps) {
        let component = <RouterContext {...renderProps} />;// b
        console.log(renderToString(component));// c
    }
});

a的输出是正确的。

警告位于b

错误发生在c

环境:

  • react-router:1.0.3
  • 历史:1.17.0
  • 反应&amp; react-dom:0.14.3

代码基于https://github.com/rackt/react-router/blob/master/docs%2Fguides%2Fadvanced%2FServerRendering.md

处的文档

1 个答案:

答案 0 :(得分:3)

我在RouterContext的源代码中找不到react-router

但是有RoutingContext,所以我使用它,现在就可以了。

感谢@limelights

这似乎是react-router https://github.com/rackt/react-router/issues/2713

的错误