2015-10-04 111 views
2

我是新的reactjs。我的问题可能对开发人员来说非常简单,但我想在这个论坛上得到一些帮助。反应路由器自动添加查询字符串参数

我有两个不同的页面,一个是路由配置页面,另一个是链接页面,我尝试加载另一个重定向到显示购物车中的物品清单的购物车页面的组件。所以从默认的模块是主页(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 to="cart"><button type="button" className="btn btn-default btn-sm">Cart&nbsp;&nbsp;{totalCartItems}</button></Link> 

两者在不同的页面。现在,当我试图点击更新网址与一些查询参数的购物车按钮以及。在默认加载其显示

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

,并与购物车的链接它显示

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

check with cart and its params

可以在任何一个通过纠正我的代码/共享一些资源(博客/视频)帮我,在这种情况下帮助我。我需要加载默认组件,并点击购物车按钮,它必须重定向到另一个组件。我在互联网上查看了很多示例,它们显示了在同一页面上使用不同的组件,但我正在使用不同的页面。请只做那些需要的。提前致谢。

回答

6

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

其文档讨论这一点,说明你一半的解决方案,选择了它:

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

+1

Jonny Buchanan,要求不工作,当我使用babelify与导入工作,以及它在解析文件时抛出像ReactifyError非法导入声明的错误。我怎么能改变这些在package.json下面的行来使babelify工作。请帮助**“开始”:“watchify -o js/bundle.js -v -d。”, “build”:“browserify。 -t [envify --NODE_ENV制作] | uglifyjs -cm> js/bundle.min.js“,** – vsm