反应路由器 - 未定义的历史记录

时间:2016-01-04 16:49:44

标签: javascript reactjs ecmascript-6 react-router

我正在尝试使用1.0.0-rc1 react-router和history 2.0.0-rc1在按下按钮后手动浏览网站。不幸的是,按下按钮后我得到了:

  

无法读取未定义的属性'pushState'

我的路由器代码:

import React from 'react';
import { Router, Route, Link, browserHistory } from 'react-router'
import AppContainer from './components/AppContainer.jsx';
import MyTab from './components/test/MyTab.jsx';
import MainTab from './components/test/MainTab.jsx';


var routes = (
    <Route component={AppContainer} >
        <Route name="maintab" path="/" component={MainTab} />
        <Route name="mytab" path="/mytab" component={MyTab} />
    </Route>
);

React.render(<Router history={browserHistory}>{routes}</Router>, document.getElementById('main'));

导航按钮位于MyTab上,它尝试导航到MainTab:

import React from 'react';
import 'datejs';
import History from "history";
export default React.createClass({

    mixins: [ History ],

    onChange(state) {
        this.setState(state);
    },

    handleClick() {
        this.history.pushState(null, `/`)
    },

    render() {
        return (
            <div className='container-fluid' >
                <button type="button" onClick={this.handleClick.bind(this)}>TEST</button>
            </div>

        );
    }
});

当我使用this.props.history的历史时,一切正常。这段代码有什么问题?

修改

添加以下内容后:

const history = createBrowserHistory();

React.render(<Router history={history}>{routes}</Router>, document.getElementById('main'));

我尝试访问我的应用。之前(没有history = {history}),我刚访问localhost:8080/testapp并且一切正常 - 我的静态资源生成到dist/testapp目录中。现在在这个URL下我得到:

  

位置“/ testapp /”与任何资源都不匹配

我尝试以下列方式使用useBasename函数:

    import { useBasename } from 'history'
    const history = useBasename(createBrowserHistory)({
    basename: '/testapp'
});

React.render(<Router history={history}>{routes}</Router>, document.getElementById('main'));

并且应用程序又回来了,但我又得到了错误

  

无法读取未定义的属性'pushState'

电话中的

handleClick() {
    this.history.pushState(null, `/mytab`)
},

我认为这可能是因为我的gulp连接任务,所以我添加了history-api-fallback配置:

settings: {
      root: './dist/',
      host: 'localhost',
      port: 8080,
      livereload: {
        port: 35929
      },
      middleware: function(connect, opt){
        return [historyApiFallback({})];
      }
    }

但是在添加中间件后,我访问网站后得到的是:

  

无法获取/

4 个答案:

答案 0 :(得分:3)

&#34; react-router&#34;:&#34; ^ 4.1.1&#34; 开始,您可以尝试以下方法:

使用&#39; this.props.history.push(&#39; / new-route&#39;)&#39;。这是一个详细的例子

1:Index.js

 import { BrowserRouter, Route, Switch } from 'react-router-dom'; 
 //more imports here
    ReactDOM.render(
      <div>
        <BrowserRouter>
           <Switch>
              <Route path='/login' component={LoginScreen} />
              <Route path='/' component={WelcomeScreen} />
           </Switch>
        </BrowserRouter>
     </div>, document.querySelector('.container'));

上面,我们使用了来自&#39; react-router-dom&#39;的浏览器路由器,路由和交换机。

因此,无论何时在React Router&#39; Route&#39;中添加组件,即

<Route path='/login' component={LoginScreen} />

.. 然后&#39;反应路由器&#39;将添加一个名为&#39; history&#39;的新属性。到这个组件(在这种情况下是LoginScreen)。您可以使用此历史记录以编程方式导航到其他rountes。

现在,在LoginScreen组件中,您可以像这样导航:

2:LoginScreen:

return (
      <div>
       <h1> Login </h1>
       <form onSubmit={this.formSubmit.bind(this)} >
         //your form here
       </form>
      </div>

    );



formSubmit(values) {
 // some form handling action
   this.props.history.push('/'); //navigating to Welcome Screen
}

答案 1 :(得分:2)

因为一切都像反应世界中的地狱一样变化,这是一个在2016年12月为我工作的版本:

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

var Main = require('../components/Main');
var Home = require('../components/Home');
var Dialogs = require('../components/Dialogs');

var routes = (
    <Router history={browserHistory}>
        <Route path='/' component={Main}>
            <IndexRoute component={Home} />
            <Route path='/dialogs' component={Dialogs} />
        </Route>
    </Router>
);

module.exports = routes

答案 2 :(得分:1)

要创建浏览器历史记录,您现在需要从History包中创建它,就像您尝试过一样。

import createBrowserHistory from 'history/lib/createBrowserHistory';

然后将其传递给路由器

<Router history={createBrowserHistory()}>
    <Route />
</Router>

docs完美地解释了这个

答案 3 :(得分:0)

 import React, { Component} from 'react';
 import { Link } from 'react-router-dom';
 class Login extends Component {
 constructor(props){
 super(props)
 }
 handleClick(event){
  this.props.history.push('/dashboard')
}
 render() {
  return (
         <Button color="primary" className="px-4"  onClick={this.handleClick.bind(this)}>Login</Button>
          )}
}