ReactJS-如何使用ES5路由视图

Question

Most of the ReactJs guides that i've found are based in ES5 . So i've started to use ReactJS in this way. Now that i know how to create all my components it's time to create a little single-page-application . My trouble is to understand how to route my views without reload the page. I've find react-router ( https://github.com/rackt/react-router ) and this seems what i need for my aim, but all the examples are written in ES6 and currently it's not yet clear to me. Surely i'll refactor my app in ES6, but i'd prefer to follow the way i've started.

Is there someone who could help me to "translate" react-router to ES5 and let me get this clearer please?

Answer 1

Here is an example for you from react-route tutorial

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)

Components App, About, Inbox, Message were created with ES6 syntax but it doesn't matter it also translates your ES6 syntax to the ES5 using babel, so you can easily pass there your ES5 components.

Also, this two lines of code:

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

means:

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

I hope it will help you.

Thanks

Answer 2

The previous answer forgot to mention about the BrowserHistory, which is an essential part of the ReactRouter. You can level up 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();