React-Router Router.HistoryLocation 刷新页面

Posted 2023-02-21

【中文标题】React-Router Router.HistoryLocation 刷新页面

【英文标题】：React-Router Router.HistoryLocation refreshes the page

【发布时间】：2015-11-28 00:08:13

【问题描述】：

我正在开发 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，以便我可以拥有更好的 url 并摆脱 #.为此，我在 client.js 中添加了 Router.HistoryLocation 作为第二个参数，它可以工作，它删除了 # 并提供了干净的 url。但是，我的页面刷新了我不想要的。

我对此进行了全面搜索，找到了几个解决方案，但它们要么使用 Flux，要么使用自定义路由器。我肯定错过了一些与状态有关但无法弄清楚的东西。有人能指出我正确的方向吗？

【参考方案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。

【讨论】：

如果您的页面在此之后仍然刷新，您能否发布一个导致刷新的链接示例？谢谢。

还是不行。所以我添加了req.url。当有页面刷新时，它会正确检测 url。但是当我尝试像这样history.pushState(id: 'SOME ID', 'Title', 'about'); 推送网址时，它不起作用。

我正在尝试从 http://localhost:3000/ 导航到 http://localhost:3000/about

你为什么手动调用history.pushState而不使用内置的Link组件或路由器转换？

router transitions - 这就是我所缺少的。你能指点我一个带有示例的文档，或者只是写一个小代码来解释这一点。感谢您的推动！

【参考方案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 是您的动态数据。