ReactJS

Question

我找到的大多数 ReactJs 指南都基于 ES5。所以我开始以这种方式使用 ReactJS 。现在我知道如何创建我所有的 components，是时候创建一点 single-page-application 了。我的问题是要了解如何在不重新加载页面的情况下 route 我的 views。我找到了 react-router (https://github.com/rackt/react-router)，这似乎是我的目标所需要的，但是所有的例子都是用 ES6 写的，目前我还不清楚。当然，我会在 ES6 中重构我的应用程序，但我更愿意遵循我开始的方式。

有没有人可以帮我 "translate" react-router to ES5 让我更清楚一点？

Answer 1

这里有一个例子来自 react-route 教程

render((
  <Router>
    <Route path="/" component={App}>
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox}>
        <Route path="messages/:id" component={Message} />
      </Route>
    </Route>
  </Router>
), document.body)

App、About、Inbox、Message 组件是使用 ES6 语法创建的，但没关系，它还使用 babel 将 ES6 语法转换为 ES5，因此您可以轻松地将 ES5 组件传递到那里。

另外，这两行代码：

import { render } from 'react-dom'
import { Router, Route, Link } from 'react-router'

表示：

var render = require('react-dom').render;
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var Link = require('react-router').Link

希望对你有所帮助

谢谢

Answer 2

之前的回答忘了说BrowserHistory，它是ReactRouter的重要组成部分。您可以升级 here.

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

ReactJS - 如何使用 ES5 路由视图

ReactJS - How to route views with ES5

javascript

react-router