随机查询字符串出现在 react-router 中答案

【问题标题】：Random query string appears in react-router随机查询字符串出现在 react-router 中
【发布时间】：2015-12-16 22:27:58
【问题描述】：

看起来很奇怪，当我打开/时，浏览器会在地址中显示/#/?_k=dlo2cz之类的东西。每次刷新页面或切换到其他路由时，随机查询字符串值都会发生变化。

代码被复制粘贴到react-router分支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);

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

为避免这种情况，您可以在创建 browserHistory 时将 queryKey 设置为 false。以下示例说明了这一点

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>

适用于 React-router v2.0.0

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

更新：

使用当前的 React-router 版本，您不需要单独安装 history npm 模块。安装 react-router 时会自动作为依赖安装。

如果你收到这样的警告：

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.

或queryKey : false 不起作用。

那么可能是您的 history 模块版本与 react-router 不兼容。只需检查您是否单独安装了历史模块，如果是，请卸载它。上述警告将消失。

编辑：获取确切的依赖关系

如果您想知道“react-router”需要哪些依赖项，请查看 github 上的 package.json，或者您可以尝试以下命令。

$ 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' 
}

【讨论】：

当我尝试这个时，它告诉我Uncaught TypeError: browserHistory is not a function。有什么想法吗？
@denislexic 您使用的是哪个版本的 react-router？
如何在 v2.4 中避免这种情况？它抛出一个错误 - 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
我得到一个空白页。
@saishreb 更新答案请检查。

【解决方案2】：

这是对位置状态的引用，记录在 here：如果想摆脱它，您需要一个不同的历史存储，例如浏览器的 History API，例如：

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

【讨论】：