containerElement不适用于React JS中的menuItem进行路由

Question

i'm new in react js and i'm trying to make routing with material-ui MenuItem . So , i'm trying to use ContainerElement but it doesn't work when i click on the MenuItem here is my code :

Navig.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")
);

and i have a component that contains the Menu : in 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);

here is my package.json file :

{
  "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"
  }
}

Answer 1

You will need to use <Link /> as MenuItem's parent.

  <Link to="/">
     <MenuItem
        key="1"
        style={{
          borderRadius: "25px",
          boxShadow: " 0px 0px  rgba(0, 0, 0, 0.1) "
        }}

      >
          <Icon type="home" />
          <span>Accueil</span>
     </MenuItem>
  </Link>

Here's a post that explains it.

UPDATE I noticed your question says you're using material-ui's MemuItem but based on your code, you're using Antd's Menu.Item . You can try this code.

      <Menu.Item
        key="1"
        style={{
          borderRadius: "25px",
          boxShadow: " 0px 0px  rgba(0, 0, 0, 0.1) "
        }}

      >
          <Link to=“/“>
            <Icon type="home" />
            <span>Accueil</span>
          </Link>
     </Menu.Item>