我是 react js 的新手，我正在尝试使用 material-ui MenuItem 进行路由。所以，我正在尝试使用 ContainerElement，但是当我单击 MenuItem 时它不起作用这是我的代码：
导航.js：
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import { Router, Route, IndexRoute, hashHistory } from 'react-router'
import PageHome from "./Components/PageHome";
import PageProfile from "./Components/PageProfile";
import PageFavoris from "./Components/PageFavoris";
import PageBesoin from "./Components/PageBesoin";
import PageService from "./Components/PageService";
import PageAbonne from "./Components/PageAbonne";
import PageAbonnement from "./Components/PageAbonnement";
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
const Root = () => (
<MuiThemeProvider>
<Router history={hashHistory}>
<Route path="/" component={PageHome}>
<IndexRoute component={PageHome} />
<Route path="/profile" component={PageProfile} />
<Route path="favoris" component={PageFavoris} />
<Route path="besoin" component={PageBesoin} />
<Route path="service" component={PageService} />
<Route path="abonne" component={PageAbonne} />
<Route path="abonnement" component={PageAbonnement} />
</Route>
</Router>
</MuiThemeProvider>
)
ReactDOM.render(
<Root />
,
document.getElementById("root")
);
我有一个包含菜单的组件：在 src/components/Profile/Contenu/Menu.js 中：
import React from "react";
import "antd/dist/antd.css";
import { Menu, Icon, Button } from "antd";
import { Affix } from "antd";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import { Link } from "react-router-dom";
const SubMenu = Menu.SubMenu;
class MenuUser extends React.Component {
state = {
collapsed: false
};
toggleCollapsed = () => {
this.setState({
collapsed: !this.state.collapsed
});
};
render() {
return (
<div>
<Menu
defaultSelectedKeys={["2"]}
mode="horizontal"
theme="light"
inlineCollapsed={this.state.collapsed}
style={{
width: "100%"
}}
>
<Menu.Item
key="1"
containerElement={<Link to="/" />}
style={{
borderRadius: "25px",
boxShadow: " 0px 0px rgba(0, 0, 0, 0.1) "
}}
>
<Icon type="home" />
<span>Accueil</span>
</Menu.Item>
<Menu.Item
key="2"
containerElement={<Link to="/profile" />}
style={{
borderRadius: "25px",
boxShadow: " 0px 0px rgba(0, 0, 0, 0.1) "
}}
>
<Icon type="solution" />
<span>Profile</span>
</Menu.Item>
<Menu.Item
key="3"
containerElement={<Link to="/favoris" />}
style={{
borderRadius: "25px",
boxShadow: " 0px 0px rgba(0, 0, 0, 0.1) "
}}
>
<Icon type="star-o" />
<span>Mes favoris</span>
</Menu.Item>
<SubMenu
key="sub1"
title={
<span>
<Icon type="database" />
<span>Mes annonces</span>
</span>
}
>
<Menu.Item
key="4"
containerElement={<Link to="/besoin" />}
style={{
borderRadius: "25px",
boxShadow: " 0px 0px rgba(0, 0, 0, 0.1) "
}}
>
Mes besoins
</Menu.Item>
<Menu.Item
key="5"
containerElement={<Link to="/service" />}
style={{
borderRadius: "25px",
boxShadow: " 0px 0px rgba(0, 0, 0, 0.1) "
}}
>
Mes services
</Menu.Item>
</SubMenu>
<Menu.Item
key="6"
containerElement={<Link to="/abonne" />}
style={{
borderRadius: "25px",
boxShadow: " 0px 0px rgba(0, 0, 0, 0.1) "
}}
>
<Icon type="rocket" />
<span>Mes abonnés</span>
</Menu.Item>
<Menu.Item
key="7"
containerElement={<Link to="/abonnement" />}
style={{
borderRadius: "25px",
boxShadow: " 0px 0px rgba(0, 0, 0, 0.1) "
}}
>
<Icon type="user" />
<span>Mes abonnements</span>
</Menu.Item>
</Menu>
</div>
);
}
}
MenuUser.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles()(MenuUser);
这是我的 package.json 文件：
{
"name": "new",
"version": "1.0.0",
"description": "",
"keywords": [],
"main": "src/navig.js",
"dependencies": {
"@material-ui/core": "1.4.0",
"@material-ui/icons": "1.1.0",
"antd": "3.7.0",
"antd-theme-generator": "1.0.7",
"components": "0.1.0",
"inline-style-prefix-all": "2.0.2",
"lbc-wrapper": "0.0.29",
"material-ui": "1.0.0-beta.34",
"nuka-carousel": "4.3.5",
"prefix-style": "2.0.1",
"react": "16.3.2",
"react-bootstrap": "0.32.1",
"react-card-flip": "0.2.1",
"react-dom": "16.4.2",
"react-easy-swipe": "0.0.16",
"react-router": "3.0.5",
"react-router-dom": "4.3.1",
"react-scripts": "1.1.4",
"react-swipeable-views": "0.12.15",
"react-tap-event-plugin": "3.0.3",
"react-uwp": "1.1.9",
"reactstrap": "6.3.0",
"reqwest": "2.0.5",
"semantic-ui-react": "0.82.1"
},
"devDependencies": {},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}