【问题标题】:React router appending query to URL反应路由器将查询附加到 URL
【发布时间】:2015-09-28 22:56:48
【问题描述】:

React 路由器似乎在我的路由末尾附加了一个查询。该应用程序由运行 express 的节点服务器提供服务。我正在使用最新版本的 react-router "1.0.0-rc1"

示例: http://localhost:8080/#/users?_k=8wsy62

两个问题

1) 为什么会这样?

2) 如何阻止它将查询附加到 url?

这是我目前的代码:

var React = require('react');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var Link = ReactRouter.Link;
var IndexRoute = ReactRouter.IndexRoute;

var App = React.createClass({
    render: function() {
        return (
            <div className="app">
                <h1>App</h1>
                <Link to="/users">Users</Link>
                {this.props.children}
            </div>
        );
    }
});

var Home = React.createClass({
    render: function() {
        return (
            <div className="home">
                <h2>Home</h2>
            </div>
        );
    }
});

var Users = React.createClass({
    render: function() {
        return (
            <div className="users">
                <h2>Users</h2>
            </div>
        );
    }
});

React.render((
    <Router>
        <Route path="/" component={App}>
            <IndexRoute component={Home} />
            <Route path="users" component={Users} />
        </Route>
    </Router>
), document.body);

【问题讨论】:

    标签: javascript reactjs react-router


    【解决方案1】:

    取自此链接:http://rackt.github.io/history/stable/HashHistoryCaveats.html

    HTML5 为我们提供了 pushState 方法和 popstate 事件,但在 旧浏览器我们唯一拥有的就是 URL。所以,当使用哈希 历史,您会在查询字符串中看到一个额外的项目,看起来 像_k = 123abc。这是历史用来查找的键 页面加载之间的 window.sessionStorage 中的持久状态数据。

    如果您不喜欢它,您可以查看上面的链接和这个链接,了解如何阻止它:https://github.com/rackt/react-router/issues/1952#issuecomment-140401701

    【讨论】:

    • 我将路由器历史道具更改为history={createBrowserHistory({queryKey: false}) 以删除额外的项目。虽然我不确定此时是否需要状态数据。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-04-16
    • 1970-01-01
    • 2011-11-06
    • 1970-01-01
    相关资源
    最近更新 更多