我正在尝试使用 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 /
最佳答案
从 "react-router": "^4.1.1" 开始,您可以尝试以下操作:
使用'this.props.history.push('/new-route')'。这是一个详细的例子
1: 索引.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”的新属性(在本例中为 LoginScreen)。您可以使用此 history Prop 以编程方式导航到其他 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
}
关于javascript - react 路由器 - 未定义的历史,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34595890/