Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/scala/19.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Reactjs 随机查询字符串出现在react路由器中_Reactjs_React Router - Fatal编程技术网

Reactjs 随机查询字符串出现在react路由器中

Reactjs 随机查询字符串出现在react路由器中,reactjs,react-router,Reactjs,React Router,看起来很奇怪,当我打开/时,浏览器会在地址中显示类似/#/?_k=dlo2cz的内容。每次刷新页面或切换到其他路由时,随机查询字符串值都会更改 将代码复制粘贴到分支1.0.0-rc1 import React from 'react'; import { Router, Route, Link, IndexRoute } from 'react-router'; const App = React.createClass({ render() { return (

看起来很奇怪,当我打开/时,浏览器会在地址中显示类似
/#/?_k=dlo2cz
的内容。每次刷新页面或切换到其他路由时,随机查询字符串值都会更改

将代码复制粘贴到分支
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);
从“React”导入React;
从“react Router”导入{Router,Route,Link,IndexRoute};
const App=React.createClass({
render(){
返回(
应用程序
{/*将s更改为s*/}
  • 关于
  • 收件箱
{/* 接下来,我们将``替换为`this.props.children` 路由器会帮我们找到孩子的 */} {this.props.children} ) } }); const Message=React.createClass({ render(){ 回信 } }); const About=React.createClass({ render(){ 返回 } }); const Inbox=React.createClass({ render(){ 返回( 收件箱 {/*呈现子路由组件*/} {this.props.children | |“欢迎使用您的收件箱”} ) } }) //最后,我们使用一些s来呈现a。 //它为我们做了所有奇妙的路由选择。 反应(( {/*添加路径,嵌套在我们希望UI嵌套的位置*/} ),文件正文);
它是对位置状态的引用,有文档记录: 如果要删除它,您需要为您的历史记录使用不同的存储,例如浏览器历史记录API,例如:

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

避免在创建
浏览器历史记录时将
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>
queryKey:false
不工作

然后,可能是您的历史模块版本与反应路由器不兼容。只需检查您是否单独安装了历史模块,如果是这样,请卸载它。上述警告将消失

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

如果您想知道“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' 
}

当我尝试此操作时,它告诉我
未捕获类型错误:browserHistory不是一个函数
。有什么想法吗?@denislexic您正在使用哪个版本的react路由器?如何在v2.4中避免这种情况?它抛出一个错误-
警告:使用{queryKey:false}不再有效。相反,如果您不希望URL查询字符串中有一个键,请不要使用位置状态。
我得到一个空白页。@saishreb更新的答案请检查。
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.
$ 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' 
}