[英]ReactJS - How to route views with ES5
我发现的大多数ReactJs
指南都基于ES5
。 所以我已经开始以这种方式使用ReactJS
。 现在,我知道如何创建所有components
,是时候创建一个小single-page-application
。 我的麻烦是要了解如何在不重新加载页面的情况下route
views
。 我已经找到了react-router
( https://github.com/rackt/react-router ),这似乎是我实现我的目标所需要的,但是所有示例都是用ES6
编写的,目前还不清楚。 当然,我会在ES6中重构我的应用程序,但我更喜欢遵循开始的方式。
是否有人可以帮助我将React-Router“转换”为ES5,并让我更清楚地了解它?
这是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)
组件应用程序,关于,收件箱,消息都是使用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();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.