在ES5中反应路由

Question

I am using "react@15.0.2" and "react-router@3.0.0". 我正在使用“ react@15.0.2”和“ react-router@3.0.0”。

I have this minimal example and I can't make it work: 我有这个最小的示例，但我无法使其工作：

var React = require('react');
var ReactDOM = require('react-dom');
var Router = require('react-router');
var Route = Router.Route;

var Test = React.createClass({
    render: function() {
        return <h1>Test</h1>;
    }
});

ReactDOM.render(
    <Router>
        <Route path="/" component={Test}/>
    </Router>,
    document.getElementById('app')
);

I know that <Test/> is OK because ReactDOM.render(<Test/>, ...) works fine. 我知道<Test/>可以，因为ReactDOM.render(<Test/>, ...)可以正常工作。

gulp compiles it, but the page is not displayed and the console says: gulp会对其进行编译，但不会显示该页面，并且控制台会显示：

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at invariant (bundle.js:41330)
    at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (bundle.js:39575)
    at ReactCompositeComponentWrapper.performInitialMount (bundle.js:28233)
    at ReactCompositeComponentWrapper.mountComponent (bundle.js:28160)
    at ReactCompositeComponentWrapper.wrapper [as mountComponent] (bundle.js:35008)
    at Object.mountComponent (bundle.js:35674)
    at mountComponentIntoNode (bundle.js:33795)
    at ReactReconcileTransaction.perform (bundle.js:38439)
    at batchedMountComponentIntoNode (bundle.js:33816)
    at ReactDefaultBatchingStrategyTransaction.perform (bundle.js:38439)

Edit: the index.htm 编辑：index.htm

<!DOCTYPE html>
  <html lang="en">
    <head>
      <title>My Page</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="css/bundle.css" />
      <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>

    <body>

      <!--ALL REACT CODE-->
      <div id="app"></div>
       <!--ALL REACT CODE-->

      <script src="scripts/bundle.js"></script>
    </body>
  </html>

Answer 1

Try wrapping the <Router> element being passed as first param into render() in parenthesis: 尝试将作为第一个参数传递的<Router>元素包装到括号中的render()中：

var Test = React.createClass({
    render: function() {
        return (<h1>Test</h1>);
    }
});

ReactDOM.render((
    <Router>
        <Route path="/" component={Test}/>
    </Router>
), document.getElementById('app'));

It may just be parsing issue. 它可能只是解析问题。

Also try updating your require statement for react-router . 还可以尝试更新您的react-router require语句。 Adding a .Router to end of the statement per react-router installation instructions for non ES6 builds. 添加.Router结束每个语句的反应路由器安装说明非ES6构建。

Hopefully that helps! 希望有帮助！

var Router = require('react-router').Router;

Answer 2

Yes like the above comment mentioned, the answers dont specify the browser history part. 是的，就像上面提到的评论一样，答案未指定浏览器历史记录部分。

var React = require("react");
var ReactDOM = require("react-dom");
var SchoolsList = require("./components/SchoolsList.jsx");
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var Link = require('react-router').Link
var browserHistory = require('react-router').browserHistory;

var _question = schoolsStore.getQuestion();

function render(){
    //console.log(_question);
    ReactDOM.render(
    <Router history={browserHistory}>
    <Route path="/" component={SchoolsList} question={_question.question} activeIndex={_question.activeIndex} />
    </Router>,
    document.getElementById("container"));
}

render();

在ES5中反应路由

问题描述

2 个解决方案

解决方案1
2 已采纳 2017-01-17 19:19:14

解决方案2
0 2017-05-26 19:09:56

在ES5中反应路由

问题描述

2 个解决方案

解决方案1 2 已采纳 2017-01-17 19:19:14

解决方案2 0 2017-05-26 19:09:56

解决方案1
2 已采纳 2017-01-17 19:19:14

解决方案2
0 2017-05-26 19:09:56