Question

我正在研究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'));
});

此设置正常运行，没有任何问题。

现在，我想使用History API pushstate，以便我可以拥有更好的网址并摆脱＃。为此，我在client.js中添加了Router.HistoryLocation作为第二个参数并且它有效，它删除了＃并提供了干净的URL。但是，我的页面刷新了我不想要的东西。

我已经搜索过这个并找到了几个解决方案，但他们要么使用Flux，要么使用自定义路由器。我肯定错过了一些与国家有关但却无法弄清楚的事情。有人能指出我正确的方向吗？

Answer 1

完全有可能将Router.HistoryLocation与快速服务器呈现的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});
});

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

此外，当<Link/>标记处于活动状态时，它还会将活动类传递给标记，因此css可以相应地设置样式。

链接

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

<强>导航

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

查看Link Docs和Navigation Docs。

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 />创建链接会阻止网页刷新。

this.props.link和this.props.page是您的动态数据。

React-Router Router.HistoryLocation刷新页面

2 个答案: