ReactJS-如何使用ES5路由視圖

Question

我發現的大多數ReactJs指南都基於ES5 。 所以我已經開始以這種方式使用ReactJS 。 現在，我知道如何創建所有components ，是時候創建一個小single-page-application 。 我的麻煩是要了解如何在不重新加載頁面的情況下route views 。 我已經找到了react-router （ https://github.com/rackt/react-router ），這似乎是我實現我的目標所需要的，但是所有示例都是用ES6編寫的，目前還不清楚。 當然，我會在ES6中重構我的應用程序，但我更喜歡遵循開始的方式。

是否有人可以幫助我將React-Router“轉換”為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)

組件應用程序，關於，收件箱，消息都是使用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的重要組成部分。 你可以在這里升級。

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