React-Router Router.HistoryLocation刷新页面

我正在使用React-Express-Node应用程序并专注于SPA。 我正在使用react-router。

我的server.js文件看起来像这样（只有路由部分）：

app.use(function(req, res, next) { Router.run(routes,function(Handler, state) { var ele = React.createElement(Handler); res.render(path.join(__dirname + '/public/index'), {html: html}); }); next(); }); 

路线文件有这个代码（粘贴主要部分）：

 module.exports = ( <Route name="app" path="/" handler={Main}> <Route name="about" path="about" handler={About}/> <Route name="about/id" path="about/:id" handler={About}/> <DefaultRoute name="default" handler={Home} /> </Route> ); 

和client.js看起来像这样：

 Router.run(routes, function(Root,state){ React.render(<Root />,document.getElementById('app')); }); 

这个设置工作正常没有任何问题。

现在，我想使用历史API推送状态，以便我可以有更好的url和摆脱＃。 为了做到这一点，我添加了Router.HistoryLocation作为client.js中的第二个参数，它工作，它删除＃和干净的url。 但是，我的页面刷新，我不想要的。

我已经search了这一切，并find了一些解决scheme，但他们要么使用Flux或自定义路由器。 我肯定错过了与国家有关的事情，但是无法弄清楚。 有人能指点我正确的方向吗？

Answer 1

完全可以使用Router.HistoryLocation和Express服务器呈现的SPA应用程序（我现在正在做）。

你需要告诉server.js文件从哪里得到的历史，即req.url …像这样。

 Router.run(routes, req.url, function(Handler, state) { var ele = React.createElement(Handler); res.render(path.join(__dirname + '/public/index'), {html: html}); }); 

如果服务器设置正确，下一个要检查的项目是如何转换到路由。 使用传统的锚点（页面标签将永远刷新页面。 React路由器提供了自己的<Link/>组件，允许您导航到您的路由而不会导致页面重新加载。 您也可以直接在路由器上调用transitionTo()来导航。

而且，当一个<Link/>标签被激活的时候，它也会把一个活动的类传递给标签，所以CSS可以相应地设置它的样式。

链接

 <Link to="route" props={} query={}>My Link</Link> 

导航

 router.transitionTo('route', params, query); 

查看链接文档和导航文档 。

Answer 2

这可能有助于meteor用户：

 import React, {Component} from 'react'; import {Link} from 'react-router'; export default class MenuItem extends Component{ render(){ return( <li> <Link to={this.props.link}>{this.props.page}</Link> </li> ); } } 

从react-router导入链接并使用<Link />创build链接将防止页面刷新。

• this.props.link和this.props.page是您的dynamic数据。