CODEWITHSUNDEEP
reactjsrouter
Florian G
Florian G

Reputation: 617

react router gives a url with a pad sign and a get parameter

I am not sure how to get clean url with react router.

For the moment I have this:

http://localhost:8889/#/myRoute?_k=qq67x0

I would like to have this:

http://localhost:8889/myRoute

Is there a particular configuration step that I should set to fix this?

This is how I initialize the router:

import { browserHistory, Router, Route, Link, IndexRoute } from 'react-router

And here is my render function:

render((
<Router history={browserHistory}>
  <Route path="/" component={App}>
    <IndexRoute component={MyComponent2} />
    <Route path="myComponent1" component={MyComponent1} />
    <Route path="myComponent2" component={MyComponent2} />
  </Route>
</Router>

), document.getElementById('react-container'))

EDIT:

I have installed the last version of the router and now it works as expected.

Thanks!

Upvotes: 0

Views: 465

Answers (1)

Michelle Tilley
Michelle Tilley

Reputation: 159105

Take a look at the documentation under "What is that ?_k=ckuvup junk in the URL?":

When a history transitions around your app with push or replace, it can store "location state" that doesn't show up in the URL on the new location, think of it a little bit like post data in an HTML form.

The DOM API that hash history uses to transition around is simply window.location.hash = newHash, with no place to store location state. But, we want all histories to be able to use location state, so we shim it by creating a unique key for each location and then store that state in session storage. When the visitor clicks "back" and "forward" we now have a mechanism to restore the location state.

The history package docs explain how to opt out, if you want to continue to use the hash history:

If you prefer to use a different query parameter, or to opt-out of this behavior entirely, use the queryKey configuration option.

import createHistory from 'history/lib/createHashHistory'

// Use _key instead of _k.
let history = createHistory({
  queryKey: '_key'
})

// Opt-out of persistent state, not recommended.
let history = createHistory({
  queryKey: false
})

If you want to use the HTML 5 pushState API, as you mentioned in your question, then you should use browserHistory in your Router configuration instead of hashHistory:

import { Router, browserHistory } from 'react-router'

<Router history={browserHistory}>
  ...

She the full "Histories" page in the React Router docs for more information.

Upvotes: 3

Related Questions