ReactJS-如何使用ES5路由视图

ReactJS - How to route views with ES5

本文关键字：路由 视图 ES5 何使用 ReactJS-      更新时间：2023-09-26

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

有没有人可以帮我把react路由器"翻译"成ES5，让我更清楚地理解这一点？

下面是反应路线教程中的一个示例

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)

组件应用程序、关于、收件箱、消息都是用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

我希望它能帮助你。

感谢

前面的答案忘记提到BrowserHistory，它是ReactRouter的重要组成部分。你可以在这里升级。

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();
相关文章：