Question

我在diff URL上渲染不同的组件时遇到了麻烦。

在应用程序中，视图是使用服务器上的节点呈现的，但由于某种原因，它显示任何网址的相同页面。

app.js

/** @jsx React.DOM */
var React = require('react');
var ReactDOM = require('react-dom');

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

var MyApp = require('./components/MyApp.react');
var Test = require('./components/Test.react');

ReactDOM.render(
  <Router history={hashHistory}>
    <Route path="/" component={MyApp}/>
    <Route path="/test" component={Test}/>
  </Router>,
  document.getElementById('myapp-app')
);

MyApp.react.js

var React = require('react');

module.exports = MyApp = React.createClass({
render: function(){
return (<div>home</div>)
      }
    });

Test.react.js

var React = require('react')
module.exports = Test = React.createClass({
  render: function(){
    return (<div>test</div>)
  }
});

server.js

var app = express();    
...here i omit other settings...
app.get('/', routes.index);
app.get('/test', routes.test);

routes.js

module.exports = {
  index: function(req, res) {
    res.render('home',{
        markup:ReactDOMServer.renderToString(MyApp())
      }
    );
},
  test: function(req,res){
    res.render('test',{
        markup:ReactDOMServer.renderToString(Test())
      }
    );
  }
}

home.handlebars

<div>{{{markup}}}</div>

test.handlebars

<div>{{{markup}}}</div>

事情对我有用，但每次都为 - /和/测试我都一样 - 主页......

多页反应应用程序

0 个答案: