基本的React路由器示例不起作用

Basic React Router Example not working

本文关键字：不起作用路由器 React 更新时间：2023-09-26

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

Components .js ->处理组件
main.js -> ->通过Routing渲染组件
索引。ejs ->通过CDN加载React/React- router依赖项
build.js -> (browserified main.js)包含为<script>

当我启动我的节点express服务器&在浏览器打开localhost:4444，我得到下面的警告&误差

React. js:20478createElement: type不应该为空，未定义，布尔值或数字。它应该是一个字符串(用于DOM)元素)或一个ReactClass(用于组合组件)。printWarning @react.js:20502createElement @react.js: 109282 . ./components @ build.js:68s @ build.js:1e @buildjs:1(匿名函数)@ Build.js:1

react.js:20145 Uncaught Error: Element type is invalid: expected a字符串(用于内置组件)或类/函数(用于组合)组件)，但得到:object.(…)

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

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

PS:我正在使用JSX组件，并且我有一个自定义的gulp babel任务来将我的JSX组件转换为JS，而不是在我的代码中使用。

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

似乎你正在使用最新版本的react-router，它不导出Router和IndexRoute(它导出StaticRouter, MemoryRouter, BrowserRouter…)。react-router的4.0.0版本处于预发布模式。

你可以使用最新的稳定版本2.8.1:https://cdnjs.cloudflare.com/ajax/libs/react-router/2.8.1/ReactRouter.js，它可以导出Router和IndexRoute。

还有你的窗户。ReactRouter导出Route和Router

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