你能解释一下为什么 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>
)
}
}