React-Router Router.HistoryLocation 刷新页面

Question

我正在研究 React-Express-Node 应用程序并专注于 SPA。我正在使用反应路由器。

我的 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 pushstate 以便我可以获得更好的 url 并摆脱 #。为此，我在 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/> 标签处于活动状态时，它还会将活动的 class 传递给标签，因此 css 可以相应地设置样式。

Link

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

导航

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

查看 Link Docs and 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 并使用 <Link /> 创建您的链接将阻止页面刷新。

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

React-Router Router.HistoryLocation 刷新页面

React-Router Router.HistoryLocation refreshes the page

node.js

express

reactjs

react-router