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

Question

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

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

我正在使用 React 路由器 v1.0。

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

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

Link 页面：（通量车组件）

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

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

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

并在 link 上显示购物车

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

任何人都可以通过更正我的 code/sharing 一些资源 (blogs/videos) 来帮助我解决这个问题。我需要加载默认组件并在单击购物车按钮时它必须重定向到另一个组件。我检查了互联网上的许多示例，这些示例显示在同一页面上使用不同的组件，但我在不同的页面中使用。请只做那些需要的。提前致谢。

Answer 1

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

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

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 添加到您自己的依赖项中。

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

react router auto adds query string params

reactjs

react-router