app.js

Question

我很难通过（https://github.com/rackt/react-router）了解react-router的流程。

如果我有2个文件：routes.js，app.js（entry component）如下：

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;

如何调用应用组件？从传统的方式来说，我使用以下代码来渲染＆＃34; app＆＃34; app.js中的组件

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

现在我不明白的是下面的代码是做什么的。它是否取代了传统的渲染方式，我需要使用以下代码来监听url并渲染app.js而不是上面的代码？

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

如果我使用另一个js文件＆＃34; main.js＆＃34;该怎么办？渲染＆＃34; app.js＆＃34;现在我想使用app.js处理所有路由我该怎么做。意思是说我想渲染app.js中传递的路线。

我在main.js中的代码如下：

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

Answer 1

首先，您需要更新App.js文件以获取正确的react-router模块。您已将routes.js文件的导出分配给Router，但应该是react-router。 Node实际上会缓存模块的结果，并将其重用于每个其他对它的引用。

您的方法可以正常工作 - 通常您会看到类似Main.js文件的内容来处理路由，而App.js更像是组件的包装器。

所以我会像这样制作一个Main.js文件..

＆＃13;

// 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);
});

＆＃13;

然后，只需让App.js挂载RouteHandler并处理任何其他父状态。当您导航到路线时，它将在Router.run功能中匹配，然后在＆＃39;系列中的所有路线匹配。匹配的路线将被渲染。

在rackt react-router

app.js

1 个答案: