Question

我的基本反应路由器设置如下

components.js - ＆gt;处理组件
main.js - ＆gt; - ＆GT;通过路由
index.ejs - ＆gt;通过CDN
build.js - ＆gt; （browserified main.js）包含在<script>

当我启动我的节点快速服务器＆amp;在浏览器打开localhost:4444我得到低于警告＆amp;错误

react.js：20478警告：React.createElement：type不应为null，   undefined，boolean或number。它应该是一个字符串（对于DOM   元素）或ReactClass（用于复合组件）.printWarning @   react.js：20478warning @ react.js：20502createElement @   react.js：109282 ../ components @ build.js：68s @ build.js：1e @   build.js：1（匿名函数）@ build.js：1

react.js：20145未捕获错误：元素类型无效：预期a   string（用于内置组件）或类/函数（用于复合   组件）但得到：对象。（...）

components.js

var React = window.React;

const App = React.createClass({
   render: function () {
      return React.createElement(
         "div",
         null,
         React.createElement(
            "ul",
            null,
            React.createElement(
               "li",
               null,
               "Home"
            ),
            React.createElement(
               "li",
               null,
               "About"
            ),
            React.createElement(
               "li",
               null,
               "Contact"
            )
         ),
         this.props.children
      );
   }
});

exports.App = App;

const Home = React.createClass({
   render: function () {
      return React.createElement(
         "div",
         null,
         React.createElement(
            "h1",
            null,
            "Home..."
         )
      );
   }
});

exports.Home = Home;

main.js

var Router = window.ReactRouter;
var Link = Router.Link;
var Route = Router.Route;
var IndexRoute = Router.IndexRoute;
var ReactDOM = window.ReactDOM;
var History = window.History;

var App = require("./components").App;
var Home = require("./components").Home;

ReactDOM.render(React.createElement(
   Router,
   { history: History.createBrowserHistory() },
   React.createElement(
      Route,
      { path: "/", component: App },
      React.createElement(IndexRoute, { component: Home }),
      React.createElement(Route, { path: "home", component: Home })
   )
), document.getElementById('app'));

index.ejs

<html>
  <head>
    <title>React Isomorphic Server Side Rendering Example</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom-server.js"></script>
    <script type="text/javascript"
    src="https://cdnjs.cloudflare.com/ajax/libs/react-router/4.0.0-2/react-router.js"></script>
    <script type="text/javascript"
    src="https://cdnjs.cloudflare.com/ajax/libs/history/4.3.0/history.js"></script>
  </head>
  <body>
    <h1 id="main-title">Isomorphic Server Side Rendering with React</h1>
    <div id="app"></div>
    <script type="text/javascript" src="/build.js"></script>
  </body>
</html>

server.js

var express = require('express'),
path = require('path'),
app = express(),
port = 4444,
bodyParser = require('body-parser');

// Include static assets. Not advised for production
app.use(express.static(path.join(__dirname, 'public')));
// Set view path
app.set('views', path.join(__dirname, 'views'));
// set up ejs for templating. You can use whatever
app.set('view engine', 'ejs');

app.get('/', function(req, res) {
    res.render('index.ejs', {});
});

app.listen(port);
console.log('Server is Up and Running at Port : ' + port);

所以，我不确定我在这里做错了什么。

babel --plugins transform-react-jsx --watch /myfolder/In /myfolder/Out

Answer 1

您似乎正在使用最新版本的react-router，它不会导出Router和IndexRoute（它导出StaticRouter，MemoryRouter，BrowserRouter ......）。反应路由器的4.0.0版本处于预发布模式。

您可以使用最新的稳定版本2.8.1：https://cdnjs.cloudflare.com/ajax/libs/react-router/2.8.1/ReactRouter.js导出路由器和IndexRoute。

您的window.ReactRouter也会导出路由和路由器

 ReactDOM.render(React.createElement(
          window.ReactRouter.Router,
          { history: History.createBrowserHistory() },
          React.createElement(
                  window.ReactRouter.Route,
                  { path: "/", component: App },
                  React.createElement(window.ReactRouter.IndexRoute, { component: Home }),
                  React.createElement(window.ReactRouter.Route, { path: "home", component: Home })
          )
  ), document.getElementById('app'));

基本的反应路由器示例无法正常工作

1 个答案: