?_k=* in the query string

[alexreardon]

After updating to the latest version I am getting ?_k=* (eg ?_k=umhx1s) added to end of my urls. A few questions:

1. What is this for?
2. Is there a way it can be removed? I like my urls to be pretty.

[gaearon]

Please see here.

[alexreardon]

My apologies. I also found more info on in here:
https://github.com/rackt/react-router/blob/master/docs/basics/Histories.md#what-is-that-_kckuvup-junk-in-the-url

[DanielSundberg]

@gaearon, could you elaborate on how your link relate to this issue? I'm not using rackt in my app...

[knowbody]

@DanielSundberg this link is to History documentation which is used by React Router. Rackt is an organization under which we keep React Router, History and many more open source projects...

[DanielSundberg]

Ok thanks for the clarification. Perhaps there should be something about this in the upgrade guide? (https://github.com/rackt/react-router/blob/master/UPGRADE_GUIDE.md). We haven't used the history feature of react-router before and I was very confused when I saw that this was added to the url.

[knowbody]

it's already here I don't see the point of repeating stuff like this everywhere. Upgrade guide says about the use of the new History, and I think that's enough. Added ?_k=cvssfs it's a small detail, which can be find explained in the part about the History specifically.

[DanielSundberg]

I don't think that adding a new parameter to the url is a small detail. And I would not expect users of a component to read through all documentation when upgrading. I did google this and I came across this issue before the documentation link in the result list.

[knowbody]

@DanielSundberg if it brings so much confusion and you don't mind please send the PR for the change in the Upgrade Guide

[johnnyreilly]

It looks like it's opt-outable here but this was hard to find and involves another package.

For what it's worth, our team was evaluating upgrading to React 0.14.0 and React Router 1.0.0 but has now decided to hold off mainly because of this - our app doesn't have any state data we need persisted and so this feature has no value for us. Unfortunately for us, adding extra dependencies (history/lib/createHashHistory) is a somewhat arduous process.

I'll try and send a docs PR for the upgrade guide.

[knowbody]

@johnnyreilly Are you saying that adding three extra lines of code is an arduous process?

[just-boris]

I don't understand why when I am using HTML5 pushState it can work without extra _k, but in case of hash navigation it is recommended to have extra query key in addition to path?

In other words why http://localhost:3000/projects is fine, but with hash it should be http://localhost:3000/#/projects?_k=zb7sg9

[taion]

HTML5 history API lets you attach state to history entries, while using hash history doesn't. That query key is to let you use things like setState. If you don't use those, you can turn off the query key.

[ethan-deng]

old browser is not a concern for me. Is it possible to opt it out from React router?

[taion]

Thanks for your question!

We want to make sure that the GitHub issue tracker remains the best place to track bug reports and feature requests that affect the development of React Router.

Questions like yours deserve a purpose-built Q&A forum. Would you like to post this question to Stack Overflow with the tag #react-router? https://stackoverflow.com/questions/ask?tags=react-router.

We also have an active and helpful React Router community on Reactiflux, which is a great place to get fast help with React Router and with the rest of the React ecosystem. You can join at https://discord.gg/0ZcbPKXt5bYaNQ46.

[mjackson]

If you're not concerned about old browsers then use browser history, not
hash history.
On Wed, Dec 2, 2015 at 5:30 PM Jimmy Jia [email protected] wrote:

Thanks for your question!

We want to make sure that the GitHub issue tracker remains the best place
to track bug reports and feature requests that affect the development of
React Router.

Questions like yours deserve a purpose-built Q&A forum. Would you like to
post this question to Stack Overflow with the tag #react-router?
https://stackoverflow.com/questions/ask?tags=react-router.

We also have an active and helpful React Router community on Reactiflux,
which is a great place to get fast help with React Router and with the rest
of the React ecosystem. You can join at
https://discord.gg/0ZcbPKXt5bYaNQ46.

—
Reply to this email directly or view it on GitHub
#1967 (comment)
.

[ButuzGOL]

On browserHistory on refresh page I am getting Cannot GET /badge
So I decided to switch to hashHistory

[JosephShering]

Some of our front end applications can't be served with * so if I don't push a hash in the url I will get a Cannot GET /login or something similar. Please let us remove the _k from the hashHistory

[gpbmike]

There's an example of how to remove the _k in the documentation: https://github.com/reactjs/react-router/blob/master/upgrade-guides/v2.0.0.md#using-custom-histories

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

[ghost]

Without ES6, I have implemented this code:

var React = require('react');
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var routerHistory = require('react-router').useRouterHistory;
var createHistory = require('../../node_modules/react-router/node_modules/history').createHashHistory;

var Base = require('../components/Base.jsx');

var appHistory = routerHistory(createHistory)({ queryKey: false });

var Routes = (
  <Router history={appHistory}>
    <Route path="/" component={Base}>

    </Route>
  </Router>
);

module.exports = Routes;

Refresh the browser without the hash code.

[bIgBV]

I came across this thread after searching for the query keys, looks like a the links posted by @gaearon and @alexreardon seem to be broken. Would be useful for people trying to understand why it was added.

[knowbody]

You can find the explanation here
https://github.com/reactjs/history/blob/master/docs/HashHistoryCaveats.md

Best,
Matt

[amio]

How about expose this option to react-router user?

[knowbody]

Not sure i understand your question

[amio]

Sorry for my English >.<
I mean let user set the queryKey without import history, such as:

var Routes = (
  <Router history={appHistory} queryKey=false>
    <Route path="/" component={Base}>

    </Route>
  </Router>
);

[knowbody]

That wouldn't make sense as only hashHistory uses query key.

Best,
Matt

[amio]

Indeed. 😓

I just don't want to touch history again since I'm using [email protected]
Let me think if there's another way.

[amio]

Well, seems we still need createHashHistory come from history rather than react-router
so it could be:

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

[knowbody]

@yard2010 thanks for your feedback.

Let me answer your main question first:
You can find everything about the Histories in our guides. And there are also upgrade guides where you can find what you look for.

Hey guys, question - why is this issue closed?

because the question has been answered and then was closed.

By the way, how come all these links are dead? these pages are just 3-4 months old.

The project has been very active in those couple months, we changed the structure of the project and that's the reason most of the links in the issues are "dead". Although if you use Github search feature it is very easy to find what you look for.

This project is not documented well

We know about it and trying to fix it as much as we can. Our main focus was getting the Router 2.0 out. We are going to work more on the docs in near future, please see: #2933

I will be happy to contribute to this project especially in documentation issues

That is great to hear, just send the PRs with suggested changes we appreciate any help.

[amio]

Thank you @knowbody , thank you again.

[ghost]

This following lines solved my problem . Thanks ! @gpbmike

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

[ixrock]

If you're using webpack-dev-server it's easily to use browserHistory!
Just add extra flag --history-api-fallback when you run your server, e.g:
webpack-dev-server --inline --content-base . --history-api-fallback and change URLs inside index.html to absolute paths. That's it! After reloading the page URL like localhost:8080/about will be working!

More info here: https://github.com/reactjs/react-router-tutorial/tree/master/lessons/10-clean-urls

[abdelav]

@ixrock the problem with --history-api-fallbac is that you will need a nodeJS server to handle routes in production. Production-ish Server

[ixrock]

@abdelav if you don't use node environment at all that's true. Just vanilla js/html/css? You don't need express server otherwise, just webpack-dev-server

[scharf]

Since some of the urls in the first posts of the thread are invalid, here some reference to the documentation that explains it. However I am still not clear what location state is needed for....

[uhtred]

With History deprecated, there is another way of using hashHistory without the "?_k=*"

Or the idea is not supporting anymore?

[timdorr]

History isn't deprecated?

[RikNieuwoudt]

Using this got rid of the query string
const appHistory = useRouterHistory(createHashHistory)({ queryKey: false })

But now I can't seem to use this.context.router.push anymore...
I'm getting the following error;
useBasename.js:105 Uncaught TypeError: history.push is not a function

[robinwkurtz]

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

The above no longer works for 2.4.1, resulting in a blank page on refresh with the following 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

Which is odd as I am not using location state regardless.

Any suggestions on course of action?

http://stackoverflow.com/questions/37591063/react-router-v2-4-querykey-false-no-longer-works

[basarat]

Updated links:

• FAQ on what it is : https://github.com/reactjs/react-router/blob/master/docs/guides/Histories.md#what-is-that-_kckuvup-junk-in-the-url
• How to opt out: https://github.com/ReactTraining/history/blob/master/docs/HashHistoryCaveats.md#caveats-of-using-hash-history

Sample:

https://github.com/reactjs/react-router/blob/master/upgrade-guides/v2.0.0.md#using-custom-histories

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

[johnnyreilly]

Hey @basarat - guess what? I'm back working on a React project.... Yay the uni-directional data flow! 😄 🌷

[zhaoqize]

I finally found what I want answers! Thanks !

[basarat]

The doc link for opt out has deleted the opt out section. I've asked for clarification there remix-run/history#337 🌹

[taion]

You don't need to explicitly opt out any more. Just don't use location state.

[basarat]

@taion since which version. I'm on https://github.com/reactjs/react-router/blob/master/CHANGES.md#v241 and it still adds _k (I don't use location state) 🌹

[basarat]

In fact I just went to latest https://github.com/reactjs/react-router/blob/master/CHANGES.md#v261 and I still get ?_k I just use import { hashHistory } from 'react-router'; with <Router history={hashHistory}>. I don't use any explicit state. Perhaps there is something implicit that I need to disable?

[taion]

It was removed in history v3. If you're using history v2 (e.g. with React Router v2), then consult the history v2 docs on the v2 branch.

[basarat]

@taion thanks! 🌹

[donaldpipowitch]

Stupid question for v3: What would be the most convenient to get _k back? Some libraries like react-router-scroll seem to need it to work properly, even if I don't use location.state.

[johnnyreilly]

I thought react router didn't work with history v3 yet?

Bugfix: Throw error instead of silently failing with history v3 (#3571)

[donaldpipowitch]

I use "react-router": "^3.0.0-alpha.3" which uses "history": "^3.0.0". Works fine :)

EDIT:
Maybe the fastest way to get _k back.

hashHistory.listenBefore((location) => {
  if (location.state === undefined) {
    location.state = true;
  }
});

[guicheffer]

Updating "react-router" to "^3.0.0-alpha.3" solved my problem.

Thanks @taion

[CodeJjang]

@donaldpipowitch @taion @basarat
This is my first days learning React, I follow the official tutorial and using 'create-react-app' as a starter kit.
I have no dependency of react-router or any reminders for it in my code, however I get an annoying '?_=1474397075436' phrase attached to my URLs, which reminds the exact kind of issue.

Do I need to install react-router and add

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

Because it doesnt actually work, I'm having a blank page, here's my index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Router, Route, useRouterHistory  } from 'react-router';
import { createHashHistory } from 'history';
import './index.css';

// disable URL query key
const appHistory = useRouterHistory(createHashHistory)({ queryKey: false })

ReactDOM.render(
    <Router history={appHistory}>
        <Route path='/' component={App}/>
    </Router>,
    document.getElementById( 'root' )
);

And anyway, why do I have to enable routes just to disable this annoying URL phrase?

@guicheffer Have you just npm installed [email protected]? Because the react module itself uses an older version, how did you force it to use this more recent router version?