在子组件上使用<link />时,this.context.history未定义

时间:2015-10-31 17:28:24

标签: reactjs react-router

如何填充上下文,以便在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>
  }
})

1 个答案:

答案 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>
);