Random query string appears in react-router

Question

Looks very strange, when I open the /, the browser will display something like /#/?_k=dlo2cz in the address. The random query string value changes every time when I refresh the page or switch to other route.

The code were copied and pasted and on react-router branch 1.0.0-rc1.

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


const App = React.createClass({
  render() {
    return (
      <div>
        <h1>App</h1>
        {/* change the <a>s to <Links>s */}
        <ul>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/inbox">Inbox</Link></li>
        </ul>

        {/*
          next we replace `<Child>` with `this.props.children`
          the router will figure out the children for us
        */}
        {this.props.children}
      </div>
    )
  }
});

const Message = React.createClass({
  render() {
    return <h3>Message</h3>
  }
});
const About = React.createClass({
  render() {
    return <h3>About</h3>
  }
});

const Inbox = React.createClass({
  render() {
    return (
      <div>
        <h2>Inbox</h2>
        {/* Render the child route component */}
        {this.props.children || "Welcome to your Inbox"}
      </div>
    )
  }
})


// Finally, we render a <Router> with some <Route>s.
// It does all the fancy routing stuff for us.
React.render((
  <Router>
    <Route path="/" component={App}>
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox}>
        {/* Add the route, nested where we want the UI to nest */}
        <Route path="messages/:id" component={Message} />
      </Route>
    </Route>
  </Router>
), document.body);

WitVault · Answer 1 · 2017-08-08T19:14:51.877

8

To avoid that you can set queryKey to false while creating browserHistory. Following example illustrates that

import { Router, Route, BrowserHistory } from 'react-router';

let bHistory = BrowserHistory({
  queryKey: false
});

  <Router history={bHistory}>
    <Route path="/" component={App}>
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox}>
        {/* Add the route, nested where we want the UI to nest */}
        <Route path="messages/:id" component={Message} />
      </Route>
    </Route>

For React-router v2.0.0

import { Router, useRouterHistory } from 'react-router'
import { createHashHistory } from 'history'
const appHistory = useRouterHistory(createHashHistory)({ queryKey: false })
<Router history={appHistory}/>

Update:

With current React-router version you don't need to install history npm module separately. It will be automatically installed as dependency while installing react-router.

If you get warning like this:

Warning: Using { queryKey: false } no longer works. Instead, 
just don't use location state if you don't want a key in your URL query string.

or queryKey : false is not working.

Then It could be the case that you may be having incompatible version of history module with react-router. Just check if you have installed history module separately, if that is the case then uninstall it. Above warning will go away.

Edit: To get the exact dependencies

If you want to know which dependencies your "react-router" needs check the package.json on github or you can try following command.

$ npm info "react-router@2.8.1" dependencies

{ 
   history: '^2.1.2',
  'hoist-non-react-statics': '^1.2.0',
   invariant: '^2.2.1',
   warning: '^3.0.0',
  'loose-envify': '^1.2.0' 
}

edited Aug 08 '17 at 19:14

answered Feb 08 '16 at 07:44

WitVault

23,445
19
103
133

When I try this, it tells me `Uncaught TypeError: browserHistory is not a function`. Any ideas? – denislexic Mar 06 '16 at 21:29
@denislexic Which version of react-router you are using? – WitVault Mar 09 '16 at 11:35
1

How to avoid this in **v2.4**? It throws an error - `Warning: Using { queryKey: false } no longer works. Instead, just don't use location state if you don't want a key in your URL query string` – Dmitriy Nevzorov Jun 02 '16 at 11:32
I get a blank page with this. – Jjang Sep 20 '16 at 20:23
@WitVault Which version of history is compatible with v2.8.1 of react-router? – koolkat Aug 08 '17 at 19:07
1

@saishreb Updated answer please check. – WitVault Aug 08 '17 at 19:15
Thanks @WitVault. The random query string disappeared on updating history per your answer. However, the `#` still remains in the URL - `http://localhost:8080/#/`. How do I get rid of it? – koolkat Aug 08 '17 at 19:22
@saishreb I think you are using hash history. I will suggest you to use browserHistory. Check this link for more info https://stackoverflow.com/questions/36289683/what-is-the-difference-between-hashhistory-and-browserhistory-in-react-router – WitVault Aug 09 '17 at 10:30
@WitVault I used `const appHistory = useRouterHistory(createHashHistory)({ queryKey: false })`. What is the browserHistory equivalent of `createHashHistory` here? – koolkat Aug 09 '17 at 18:19

score 5 · Answer 2 · edited Mar 18 '16 at 06:22

5

It's a reference to the location state, it's documented here: If want to get rid of it, you need a different storage for your history such as the browsers History API, for example:

import createBrowserHistory from 'history/lib/createBrowserHistory';    
<Router history={createBrowserHistory()}>

edited Mar 18 '16 at 06:22

hakunin

4,041
6
40
57

answered Sep 20 '15 at 19:56

Eelke

2,267
1
22
26

Random query string appears in react-router

2 Answers2