未捕获的ReferenceError:未定义链接

时间:2016-09-06 20:00:49

标签: javascript reactjs

你能解释一下为什么 Uncaught ReferenceError:未定义链接出现在botton提到的代码中。在控制台中我看到问题行为: react2.default.createElement(Link,{ to: "/carwashAdd" }但我有链接标记。它锁定在文件TitleWithAddButton.jsx中。问题出在哪儿?我不明白的是什么?

Index.jsx

import React from "react";
import ReactDOM from "react-dom";
import { Router, Route, Link, IndexRoute, IndexLink, hashHistory } from 'react-router'
import MyHeader from './MyHeader.jsx';
import CarWashPage from './CarWashPage.jsx';
import AddCarWashPage from './carwash/AddCarWashPage.jsx'

var destination = document.querySelector("#container");

var Main  = React.createClass({
render: function() {
    return (
        <div>
            <h2>Main</h2>
        </div>
    );
}
});

ReactDOM.render(
<Router history={hashHistory}>
    <Route path="/" component={MyHeader}>
        <IndexRoute component={Main}/>
        <Route path="carwash" component={CarWashPage} />
        <Route path="carwashAdd" component={AddCarWashPage} />

    </Route>
</Router>,
destination
);

MyHeader.jsx

import React from 'react';
import { Router, Route, Link, IndexRoute, IndexLink, hashHistory } from 'react-router'

export default class MyHeader extends React.Component{

render() {
    return (
    <div className = "page">
      <header>
          <nav className="navbar navbar-default">
              <div className="container-fluid">
                <div>
                      <ul className="nav navbar-nav">
                          <li><Link to="/">Main</Link></li>
                          <li><Link to="/carwash">CarWash</Link></li>
                      </ul>
                  </div>
              </div>
          </nav>
      </header>
      <div className="content">
        {this.props.children}
      </div>
    </div>
    );

} };

CarWashPage.jsx

import React from 'react';
import TitleWithAddButton from './TitleWithAddButton.jsx';
import AllCarWashTable from './carwash/AllCarWashTable.jsx'

export default class CarWashPage extends React.Component{

render(){       
    return (
       <div> 
            <TitleWithAddButton title="All carawashes"/>
            <AllCarWashTable/>
       </div>    
    )
}
}

TitleWithAddButton.jsx

import React from 'react';

export default class TitleWithAddButton extends React.Component{

 render(){
    return (
        <div className="title-with-add-button">
            <div>
                <Link to="/carwashAdd"><button type="button" className="btn btn-success" style={button}>Add</button></Link>
            </div>
            <h2>{this.props.title}:</h2>
        </div>
    )
}

}

0 个答案:

没有答案