React Router-未定义的历史记录 [英] React router - undefined history
问题描述
我正在尝试使用1.0.0-rc1 react-router和历史记录2.0.0-rc1在按下按钮后手动浏览网站.不幸的是,按下按钮后,我得到:
I am trying to use the 1.0.0-rc1 react-router and history 2.0.0-rc1 to navigate manually through the website after pressing the button. Unfortunately, after pressing the button I get:
无法读取未定义的属性"pushState"
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:
The navigation button is on MyTab and it attemps to navigate to 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
一起使用时,一切正常.这段代码有什么问题?
When I use history with this.props.history
everything works fine. What is the problem with this code?
编辑.
添加以下内容后:
const history = createBrowserHistory();
React.render(<Router history={history}>{routes}</Router>, document.getElementById('main'));
我尝试访问我的应用.之前(没有history = {history}),我刚刚访问localhost:8080/testapp
,并且一切正常-我的静态资源生成到dist/testapp
目录中.现在,在此URL下,我得到:
I try to access my app. Before (without history={history}), I just accessed localhost:8080/testapp
and everything worked fine - my static resources are generated into dist/testapp
directory. Now under this URL I get:
位置"/testapp/"与任何资源都不匹配
Location "/testapp/" did not match any resources
我尝试通过以下方式使用useBasename函数:
I tried to use the useBasename function in a following way:
import { useBasename } from 'history'
const history = useBasename(createBrowserHistory)({
basename: '/testapp'
});
React.render(<Router history={history}>{routes}</Router>, document.getElementById('main'));
应用程序又回来了,但是我又收到了错误消息
and the application is back, but again I get the error
无法读取未定义的属性"pushState"
Cannot read property 'pushState' of undefined
在通话中:
handleClick() {
this.history.pushState(null, `/mytab`)
},
我想可能是因为我在gulp中执行了connect任务,所以我在配置中添加了history-api-fallback:
I thougt it may be because of my connect task in gulp, so I have added history-api-fallback to configuration:
settings: {
root: './dist/',
host: 'localhost',
port: 8080,
livereload: {
port: 35929
},
middleware: function(connect, opt){
return [historyApiFallback({})];
}
}
但是添加中间件后,访问网站后得到的所有信息是:
But after adding middleware all I get after accessing a website is:
无法获取/
Cannot GET /
推荐答案
自反应路由器":"^ 4.1.1" 起,您可以尝试以下操作:
As of "react-router": "^4.1.1", you may try the following:
使用" this.props.history.push('/new-route')".这是一个详细的示例
Use 'this.props.history.push('/new-route')'. Here's a detailed example
1:Index.js
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'));
上面,我们已经使用BrowserRouter,"react-router-dom"中的Route和Switch.
Above, we have used BrowserRouter, Route and Switch from 'react-router-dom'.
因此,每当您在React Router的"Route"中添加组件时,即
So whenever you add a component in the React Router 'Route', that is,
<Route path='/login' component={LoginScreen} />
.. ,然后"React Router"将向该组件添加一个名为"history"的新属性(在本例中为LoginScreen).您可以使用此历史记录道具以编程方式导航到其他活动.
..then 'React Router' will add a new property named 'history' to this component (LoginScreen, in this case). You can use this history prop to programatically navigate to other rountes.
因此,现在在LoginScreen组件中,您可以像这样导航:
So now in the LoginScreen component you can navigate like this:
2: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
}
这篇关于React Router-未定义的历史记录的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!