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

Question

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

Cannot read property 'pushState' of undefined

我的路由器代码：

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下我得到：

Location "/testapp/" did not match any resources

我尝试通过以下方式使用 useBasename 函数：

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

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

应用程序已恢复，但我再次收到错误

Cannot read property 'pushState' of undefined

通话中：

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({})];
      }
    }

但是添加中间件后，我访问网站后得到的是：

Cannot GET /

Answer 1

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

import createBrowserHistory from 'history/lib/createBrowserHistory';

然后像这样传给Router

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

docs完美诠释了这一点

Answer 2

因为在 React 世界中一切都像地狱一样变化，这里有一个版本在 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

Answer 3

从 "react-router" 开始：“^4.1.1”，您可以尝试以下操作：

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

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'));

以上，我们使用了来自'react-router-dom'的BrowserRouter、Route和Switch。

所以每当你在React Router中添加一个组件'Route'，即

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

..然后 'React Router' 将添加一个名为 'history' 的新属性到此组件（在本例中为登录屏幕）。您可以使用此 history 道具以编程方式导航到其他 rountes。

所以现在在 LoginScreen 组件中，您可以像这样导航：

2：登录屏幕：

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
}

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

React router - undefined history

javascript

ecmascript-6

reactjs

react-router