我正在学习 React JavaScript 库。我想创建一个具有以下布局的简单网络应用程序：菜单 + 子菜单 + 内容。我使用 react 15.0.2、react-router 2.4.0、babel 6.5.2 和 webpack 1.13.0。

我能够创建菜单 + 内容布局，但我不知道添加子菜单部分的最佳做法是什么。

我的应用程序如下所示：

Home ~ About ~ Contact ~ Profile

content...

我想在 Profile 菜单项下添加一个子菜单，但是前 3 个菜单项没有子菜单。因此，如果我单击“关于”和“联系”链接，那么我希望在主菜单栏下看到正确的内容。如果我单击“个人资料”链接，则需要显示一个子菜单。点击菜单+子菜单对下需要显示内容的子菜单项：

Home ~ About ~ Contact ~ Profile

Profile-Submenu 1 ~ Profile-Submenu 2 ~ ...

content...

应用程序.js

ReactDom.render(
    <Router>
        <Route component={MainLayout}>
            <Route path="/" component={Home} />
            <Route path="home" component={Home} />
            <Route path="about" component={About} />
            <Route path="contact" component={Contact} />
            <Route path="profile" component={Profile} />
        </Route>
    </Router>,  
    document.getElementById('root')
);

MainLajout.js

export default class MainLayout extends React.Component {
    render() {
        return (
            <div>
                <MainMenu />
                <main>{this.props.children}</main>
            </div>
        );
    }
}

主菜单.js

export default class MainMenu extends React.Component {
    render() {
        return (
            <div style={style.container}>
                <Link to='/'>Home</Link>
                {'\u00a0'}~{'\u00a0'}
                <Link to='/about'>About</Link>
                {'\u00a0'}~{'\u00a0'}
                <Link to='/contact'>Contact</Link>
                {'\u00a0'}~{'\u00a0'}
                <Link to='/profile'>Profile</Link>
            </div>
        );
    }
}

你能指导我正确的方向吗？