CODEWITHSUNDEEP
reactjsreact-router
vsm
vsm

Reputation: 169

react router auto adds query string params

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.

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.

I m using react router v1.0.

Route configuration page:(app.js)

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

Link Page:(Flux Cart Component)

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

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

check with cart and its params

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.

Upvotes: 2

Views: 3061

Answers (1)

Jonny Buchanan
Jonny Buchanan

Reputation: 62793

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:

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}>...

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

Upvotes: 6

Related Questions