反应路由器自动添加查询字符串参数 [英] react router auto adds query string params

问题描述

我是 reactjs 的新手.我的问题对于 React 开发者来说可能非常简单，但我想通过这个论坛的人获得一些帮助.

I am new to reactjs. My question may be very simple for react developers but i thought to get some help over this forum folks.

我有两个不同的页面，一个是路由配置页面，另一个是链接页面，我正在尝试加载另一个组件，该组件重定向到购物车页面，该页面显示购物车中的项目列表.因此，默认情况下，主页(app.js) 模块必须重定向到购物车页面.

I have two different pages, one is route configuration page and another is link page where i am trying to load another component that redirects to cart page that shows list of items in cart. So from by default module that is homepage(app.js) it has to redirect to cart page.

我使用的是 react router v1.0.

I m using react router v1.0.

路由配置页面:(app.js)

React.render((<Router>
            <Route path="/" component={FluxShoppingCart}>
            <IndexRoute component={FluxShoppingCart}/>
              <Route name="cart"  component={ViewCart} />
            </Route>            
        </Router>),document.getElementById('container'));

链接页面:(Flux Cart 组件)

<Link to="cart"><button type="button" className="btn btn-default btn-sm">Cart&nbsp;&nbsp;{totalCartItems}</button></Link>

两者都在不同的页面中.现在，当我尝试单击正在使用一些查询参数更新 url 的购物车按钮时.默认加载其显示

Both are in different pages. Now when i am trying to click on Cart button that is updating url with some query params as well. On default loading its showing

http://localhost:8080/#/?_k=exw21r

并在与购物车的链接上显示

and on link with cart its showing

http://localhost:8080/#/cart?_k=xme60o

任何人都可以通过更正我的代码/共享一些资源(博客/视频)来帮助我解决这种情况.我需要加载默认组件，然后单击购物车按钮，它必须重定向到另一个组件.我检查了互联网上的许多示例，这些示例显示在同一页面上使用不同的组件，但我在不同的页面中使用.请只做那些需要的.提前致谢.

Could any one help me by correcting my code/sharing some resources(blogs/videos) that helps me out in this scenario. I need to load default component and on clicking cart button it has to redirect to another component. I checked many examples in internet which shows working with different components on same page, but i am using in different pages. Please do the needful. Thanks in advance.

推荐答案

history 模块添加了一个独特的查询字符串，以便在使用基于 window.location.hash 的历史记录时，它可以将每个历史记录项与 sessionStorage 中的某个状态相关联.

The history module adds a unique query string so it can associate each history item with some state in sessionStorage when using window.location.hash-based history.

它的文档对此进行了讨论，并向您展示了选择退出它的一半解决方案:

Its documentation discusses this and shows you half the solution to opt out of it:

• https://github.com/rackt/history/blob/master/docs/HashHistoryCaveats.md

另一半是将历史实例传递给你的Router.

The other half is to pass the history instance to your Router.

var createHashHistory = require('history/lib/createHashHistory')

// Opt out of persistent state query key for for hash history
var history = createHashHistory({queryKey: false})

<Router history={history}>...

您还需要将 history 添加到您自己的依赖项中.

You will need to add history to your own dependencies too.

这篇关于反应路由器自动添加查询字符串参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！