Intereting Posts

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或自定义路由器。 我肯定错过了与国家有关的事情,但是无法弄清楚。 有人能指点我正确的方向吗?

Solutions Collecting From Web of "React-Router Router.HistoryLocation刷新页面"

完全可以使用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); 

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

这可能有助于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.linkthis.props.page是您的dynamic数据。