Кодовый поток в стойке реактивного маршрутизатора

Question

У меня возникли трудности с пониманием потока реактивного маршрутизатора (https://github.com/rackt/react-router).

Если у меня есть 2 файла: routes.js, app.js (запись компонента), как показано ниже:

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

var routes = (
    <Route handler={App}> 
    <Route path="/" handler={home}/> 
    </Route> 
); 


module.exports = routes; 

app.js

var React = require('react'); 
var Router = require('../routes.js'); 
var RouteHandler = Router.RouteHandler; 

var App= React.createClass({ 
    render: function(){ 
     return (
      <RouteHandler/> 
     ) 
    } 

}); 


module.exports = App; 

Как компонент приложения вызывается? По традиционному способу я использую следующий код для рендеринга компонента «app» в app.js.

React.render(
    <App />, document.getElementById('main') 
); 

Теперь, что я не понимаю, это то, что делает следующий код. Является ли это заменой традиционного способа рендеринга, мне нужно использовать следующий код для прослушивания url и рендеринга app.js, но не с вышеуказанным кодом?

Router.run(routes, Router.HashLocation, (Root) => { 
    React.render(<Root/>, document.body); 
}); 

Что делать, если я использую другой JS файл «main.js», чтобы сделать «app.js», и теперь я хочу использовать app.js обрабатывать все пути, как я это делаю. Сказать, что я хочу отобразить, что когда-либо было передано в app.js.

Мой код в main.js ниже:

React.render(
    <APP />, document.getElementById('main') 
); 

Answer 1

Во-первых, вам нужно обновить App.js файл, чтобы захватить правильный react-router модуль. Вы назначаете экспорт вашего routes.js файла на Router, но он должен быть react-router. Узел фактически кэширует результат модуля и повторно использует его для любой другой ссылки на него.

Ваш подход будет работать нормально - обычно вы видите что-то вроде файла Main.js для обработки маршрутизации, а App.js - это скорее оболочка для вашего компонента (ов).

Так что я сделал бы Main.js файл как так ..

// Main.js 
 
var React = require('react'); 
 
var Router = require('react-router'); 
 
var routes = require('../routes.js'); 
 
var RouteHandler = Router.RouteHandler; 
 

 
Router.run(routes, function(Handler, state) { 
 
    React.render(<Handler />, document.body); 
 
});

Тогда просто сделать свой App.js смонтировать RouteHandler и обрабатывать любой другой родитель состояние. Когда вы переходите к маршруту, он будет соответствовать ему в функции Router.run, а затем будут отображены все маршруты в «семействе» согласованного маршрута.