在阅读了关于我的问题的大部分类似问题之后,我仍然没有找到答案。
我正在使用material-ui进行UI设计,我正在尝试在抽屉上添加链接,但链接让我无法获取错误。这是代码:
import React from 'react';
import { Link, IndexLink } from 'react-router';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
import FloatingActionButton from 'material-ui/FloatingActionButton';
import ContentAdd from 'material-ui/svg-icons/content/add';
import RaisedButton from 'material-ui/RaisedButton';
const style = {
backgroundColor: "#EF413D",
marginRight: 20,
width: 40,
};
export default class DrawerLeft extends React.Component {
constructor(props) {
super(props);
this.state = {open: false};
this.handleToggle = this.handleToggle.bind(this);
this.handleClose = this.handleClose.bind(this);
}
//This handles the closing event
handleClose() {this.setState({open: false});}
//This handles the opening event
handleToggle() { this.setState({open: !this.state.open}); }
render() {
return (
<div>
<FloatingActionButton onClick={this.handleToggle} mini={true}>
<ContentAdd style={style} />
</FloatingActionButton>
<Drawer
docked={false}
width={400}
open={this.state.open}
onRequestChange={(open) => this.setState({open})}
>
<MenuItem onClick={this.handleClose}>
<IndexLink>
<Link to="./HomePage">Home</Link>
</IndexLink>
</MenuItem>
<MenuItem onClick={this.handleClose}>
<IndexLink>
<Link to="./About">About</Link>
</IndexLink>
</MenuItem>
<MenuItem onClick={this.handleClose}>
<IndexLink>
<Link to="./Rates">Rates</Link>
</IndexLink>
</MenuItem>
</Drawer>
</div>
);
}
}
我尝试将IndexLink更改为路由器或路由,与Link相同,但它给了我更多错误。