ReactJS - Как проложить маршрут с помощью ES5

Question

Большинство руководств ReactJs, которые я нашел, основаны на ES5. Таким образом, я начал использовать ReactJS таким образом. Теперь, когда я знаю, как создать все мои components, пришло время создать немного single-page-application. Моя проблема заключается в том, чтобы понять, как route мой views без перезагрузки страницы. Я нахожу react-router (https://github.com/rackt/react-router), и это кажется тем, что мне нужно для моей цели, но все примеры написаны в ES6, и в настоящее время мне это пока не ясно. Несомненно, я реорганизую свое приложение в ES6, но я предпочел бы следовать тому, как я начал.

Есть ли кто-нибудь, кто мог бы помочь мне «перевести» реактивный маршрутизатор на ES5 и дать мне понять это?

Answer 1

Вот вам пример из реагировать маршрутные учебника

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, О, Входящие сообщения были созданы с помощью синтаксиса ES6, но это не имеет значения, он также переводит свой синтаксис ES6 в ES5 с помощью babel, поэтому вы можете легко передать туда свои компоненты 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();