react路由器自动添加查询字符串参数

Question

我是反应灵的新手.我的问题对于反应开发者来说可能非常简单,但我想在这个论坛上得到一些帮助.

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

我使用的是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 Component)

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

两者都在不同的页面.现在,当我试图点击正在更新url的Cart按钮时,还有一些查询参数.在默认加载其显示

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

并在与车的链接上显示

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

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

Answer 1

该历史模块增加了一个独特的查询字符串,因此它可以在一些州各历史项关联sessionStorage使用时,window.location.hash基于历史.

它的文档讨论了这一点,并向您展示了退出它的一半解决方案:

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

另一半是将历史实例传递给你的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自己的依赖项.