如何从 URL 中隐藏反应路由器参数和查询字符串

Posted 2023-02-22

【中文标题】如何从 URL 中隐藏反应路由器参数和查询字符串

【英文标题】：How to Hide react router parameters and query strings from URL

【发布时间】：2017-01-06 11:25:42

【问题描述】：

我在 client.js 中定义了如下路由，它运行良好，我需要传递 JSON，所以我尝试作为查询参数传递。

<Router history=appHistory>
    <Route path="/" component=Login></Route>
    <Route path='/login' component=Login></Route>
    <Route path="/user" component=Home></Route>
</Router>

在登录组件中，我将路由更改如下，

hashHistory.push(
    pathname: '/user',
    query:  JSONResp: JSON.stringify(result.data)
);

它工作正常，我可以访问查询参数。

是否有任何选项可以从 URL 中隐藏此查询值，并且我的 JSON 响应大小将在 2MB 左右，是否建议在查询参数中传递此数据。

【问题讨论】：

您可以使用 PUSH 代替 GET 方法，并将您的参数隐藏在 PUSH 参数下。

另外，GET的参数大小是有限制的。因此，如果您的数据很大，请使用 PUSH

所以我可以像上面那样使用 hashHistory.push??以及如何在推送状态下隐藏参数.. 我在我的网站中搜索我没有找到任何选项

【参考方案1】：

运行history.pushState(null,null,window.location.href.split('?')[0])，请注意浏览器不会在调用pushState() 后尝试加载该URL，但它可能会在稍后尝试加载该URL，例如在用户重新启动浏览器之后。