如何填充上下文,以便在react-router中使用标记时未定义历史记录?
我得到的错误是: 未捕获的TypeError:无法读取未定义的属性“pushState”
关于函数Link.handleClick at line:
if (allowTransition) this.context.history.pushState(this.props.state, this.props.to, this.props.query);
我正在使用react-router 1.0.0-rc1。
顶级路线运作良好。我到达了我的主要组件,它显示了“注册”的链接。这个链接应该把我带到子组件。
我的示例应用程序如下所示:
Routes.jsx
============
var React = require('react');
var ReactRouter = require('react-router');
var createBrowserHistory = require('history/lib/createBrowserHistory');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var Main = require('./main/main');
var Signup = require('./signup/signup');
module.exports = (
<Router history ={createBrowserHistory()}>
<Route path="/app" component={Main}>
<Route path="/signup" component={Signup}></Route>
</Route>
</Router>
);
Main.jsx
===============
var ReactRouter = require('react-router');
var Link = ReactRouter.Link;
module.exports = React.createClass({
render: function(){
return <div><Link to="/signup">signup</Link></div>
}
})
答案 0 :(得分:0)
我遇到了同样的问题。确保您的<Router>
定义位于顶层,而不是嵌入在另一个组件中。
我正在使用的版本:
var React = require('react');
var ReactDOM = require('react-dom');
var {useBasename, createHistory} = require('history');
var routes = require('./routes/routes');
var {Router} = require('react-router');
const history = useBasename(createHistory)({
basename: '/'
})
ReactDOM.render(
<Router history={history}>
{routes}
</Router>,
document.getElementById('app'));
我的routes.js文件:
var React = require('react');
var { IndexRoute, Router } = require('react-router');
var Route = require('react-router').Route;
var AppContainer = require('../components/AppContainer');
var Index = require('../components/Index');
var Login = require('../components/Login');
var Register = require('../components/Register');
module.exports = (
<Route path="/" component={AppContainer}>
<IndexRoute component={Index} />
<Route path="register" component={Register} />
</Route>
);