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

我正在尝试使用1.0.0-rc1 react路由器和历史记录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'));

我尝试访问我的应用程序。之前（没有历史记录={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'));

我想这可能是因为我在gulp中的connect任务，所以我在配置中添加了history api fallback：

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

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

得不到/

---

要创建浏览器历史记录，您现在需要从

history

包中创建它，就像您尝试过的那样

import createBrowserHistory from 'history/lib/createBrowserHistory';

然后像这样把它传给路由器

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

---

这本书完美地解释了这一点

，因为世界上的一切都像地狱一样变幻莫测。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

从“React”导入React
从“react Router”导入{Router，react Router，Route，IndexRoute，browserHistory}；
var Main=require（'../components/Main'）；
var Home=require（“../components/Home”）；
var Dialogs=require（“../components/Dialogs”）；
变量路由=(
);
module.exports=路由

从“^4.1.1”起，您可以尝试以下操作：

const history = createBrowserHistory();

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

使用“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}；
//这里有更多的进口货
ReactDOM.render(
，document.querySelector（'.container'）；

上面，我们使用了来自“react router dom”的BrowserRouter、Route和Switch

因此，每当您在React路由器“路由”中添加组件时

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

..然后“React Router”将向该组件添加一个名为“history”的新属性（本例中为LoginScreen）。您可以使用此历史道具以编程方式导航到其他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
}

返回(
登录
//你的表格在这里
);
表单提交（值）{
//一些表单处理操作
this.props.history.push（“/”）；//导航到欢迎屏幕
}

请添加其他历史记录类型createHashHistory、createBrowserHistory、，createMemoryHistory@limelights我尝试了你的建议并更新了问题。你能看一看吗？@holms在撰写本文时，它工作正常，自1月份以来，路由器发生了重大变化：）类型“历史”不可分配给类型“历史”——关闭laptop@ChrisNoreikis他们可能从一年前就改变了

<Route path='/login' component={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
}