时间戳

首页 > 解决方案 > 链接到路由 Material-UI MenuItems

javascript - 链接到路由 Material-UI MenuItems

问题描述

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

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

我怎样才能做与component={Link} to="/health"每个类似的事情MenuItem？

编辑——如果改为导入材料 ui，则上述行工作正常。

应用程序.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>
            );
    }
}

主菜单.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;

标签： javascriptreactjsuser-interfacereact-routermaterial-ui

解决方案

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

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 元素或组件的字符串。

推荐阅读