React Router中的<Link />无法正常工作

Question

React Router中的<Link />无法正常工作

3

我能够成功加载我的组件及其子组件，但是使用 <Link/> 组件时遇到了问题。我正在尝试在我的主应用程序组件中使用它，如下所示：

"use strict";
var React = require('react');
var Navigation = require('./navigation');
var UserActions = require('../actions/userActions.js');
var UserStore = require('../stores/userStore.js');

var App = React.createClass({

    getInitialState: function(){
        return { currentUser: "" }
    },

    componentWillMount: function(){
      var user = UserStore.getUser();
      this.setState({currentUser: user })
    },

    render: function(){
       return (
            <div>
                <div id="nav-container">
                  <Navigation user={this.state.currentUser}/> 
                </div>
                <div id="main-content"></div>
            </div>
        );
    }
});

module.exports = App;

这是我的导航组件相关部分。我可以手动导航到URL，一切都正常工作。

"use strict";
var React = require('react');
var Link = require('react-router').Link;


var Navigation = React.createClass({
   render: function(){
      return (
      {(this.isAdmin())?
          <div className="nav-parent">
              <p onClick={this.showChildren}>ADMIN TOOLS</p>
                 <ul className="child-nav">
                     <li><Link to={'admin/logos'}>Logos</Link></li>
                  </ul>
           </div>
         :null}
        )
   }
})

以下是路由信息：

     <Route path="/admin" component={require('./components/admin/admin.js')}>
         <Route path="logos" component={require('./components/admin/logos.js')}></Route>
  </Route>

当我点击React生成的链接时，控制台会出现以下错误：

bundle.js: Uncaught TypeError: Cannot read property 'push' of undefined

手动导航到URL没有问题。

- Michael

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rafael Angeline · Answer 1

尝试将您的路由声明更改为：

<Route path="/admin" component={require('./components/admin/admin.js')}>
    <Route path="logos" component={require('./components/admin/logos.js')} />
</Route>

并且你的链接是：

<li><Link to={'/admin/logos'}>Logos</Link></li>

如果那不起作用，点击控制台中错误的更多细节箭头，并检查它发生在哪里。