Question

我可以正常加载我的组件及其子组件，但我遇到了<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>

单击生成的反应链接时，我在控制台中收到以下错误：

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

手动导航到网址工作正常。

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>

如果不起作用，请在控制台的错误中单击更多详细信息箭头，然后检查它发生的位置。

React Router <link />无效

1 个答案: