Question

我是React的新手。我正在学习React Routing。我创建了一个简单的App。这是我的代码

<html>
    <head>
        <title>React Routing</title>
        <script src="/Ch13-01-DisplayInitialFrame/resources/js/react.js" type="text/javascript"></script>
        <script src="/Ch13-01-DisplayInitialFrame/resources/js/react-dom.js" type="text/javascript"></script>

        <script src="/Ch13-01-DisplayInitialFrame/resources/js/babel.js" type="text/javascript"></script>

        <script src="/Ch13-01-DisplayInitialFrame/resources/js/react-router-4.0.0-2.js" type="text/javascript"></script>
        <link href="/Ch13-01-DisplayInitialFrame/resources/css/reactRouting.css" rel="stylesheet"><script>;
    </head>
    <body>
        <div id="container"></div>
        <script src="/Ch13-01-DisplayInitialFrame/resources/js/reactRouting.js" type="text/babel"></script>
    </body>
</html>

这是我的reactRouting.js

var destination = document.querySelector("#container");
var App = React.createClass({
    render: function() {
        return (
            <div>
                <h1>Simple SPA</h1>
                <ul className="header">
                    <li>Home</li>
                    <li>Stuff</li>
                    <li>Contact</li>
                </ul>
                <div className="content">
                </div>
            </div>
        );
    }
});

ReactDOM.render(
    <div>
        <App/>
    </div>,
    destination
);

此代码工作正常。但是当我将Render改为使用ReactRouter时，我开始遇到错误

ReactDOM.render(
    <ReactRouter.Router>
        <ReactRouter.Route path="/" component={App} />
    </ReactRouter.Router>,
    destination
);

错误是

You are using the in-browser Babel transformer. Be sure to precompile your     scripts for production - https://babeljs.io/docs/setup/
babel.js (60774,4)
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).
react.js (20483,9)
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).
react.js (20483,9)
SCRIPT5022: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
react.js (20157,5)

我做错了什么？我正在使用React v15.3.1。我还需要更多的j来运行此代码吗？

由于

Answer 1

您使用的ReactRouter 4与之前的版本完全不同，请使用new documentation。
我还建议您在使用React时特别使用捆绑包。 create-react-app是一个很好的样板生成器，例如它负责捆绑器配置，babel等。
最后在ReactRouter v4中，您应该使用基于doc的ReactRouter.BrowserRouter组件如果您坚持尝试通过脚本标签做出反应，请使用其npm页面中提供的脚本链接添加ReactRouter。我强烈建议不要在生产应用程序中使用此配置。

获取错误学习React Routing时元素类型无效

1 个答案: