链接到路由 Material-UI MenuItems

Question

我正在使用 Material-UI 的菜单组件（我需要使用他们的库） 但我无法将每个 MenuItem 链接到我已有的路线。

我暂时使用锚元素，但这不是最佳选择。

如何对每个MenuItem 执行类似于component={Link} to="/health" 的操作？

EDIT -- 如果改为导入材质 ui，上述行可以正常工作。

App.js

class App extends React.Component {

    render() {
            return (
                <ThemeProvider>

                    <Router>
                        <div className="App-center">
                            <Route path="/" component={()=>(<div><Header/>
                                <MainMenu/></div>)}/>

                            <Route path="/health" component={HealthForm}></Route>
                        </div>
                    </Router>

                 </ThemeProvider>
            );
    }
}

MainMenu.js

class MainMenu extends React.Component {

  render() {
    return (   
        <Menu className="App-body-menu">
            <MenuItem>
                <a href="/">Home</a>
            </MenuItem>
            <MenuItem>
                <a href="/health">Health</a>
            </MenuItem>
        </Menu>   
    );
  }
}
export default MainMenu;

Answer 1

您的问题似乎已经有了答案：

class MainMenu extends React.Component {
    render() {
        return (   
            <Menu className="App-body-menu">
                <MenuItem component={Link} to="/">
                    Home
                </MenuItem>
                <MenuItem component={Link} to="health">
                    Health
                </MenuItem>
            </Menu>
        );
    }
}

export default MainMenu;

https://material-ui.com/api/menu-item/

道具

component - 用于根节点的组件。使用 DOM 元素或组件的字符串。