React 路由器动态导航面板答案

【问题标题】：React router dynamic navigation panelReact 路由器动态导航面板
【发布时间】：2019-09-18 22:14:19
【问题描述】：

拥有以下图片及其各自的html：

<nav className="navigation">
        <div className="navigation-first">
            <div className="navigation-container">
                <Link to="/" activeClassName="active">Dashboard</Link>
                <Link to="/work" activeClassName="active">Work</Link>
                <Link to="/profile" activeClassName="active">My profile</Link>
                <Link to="/account" activeClassName="active">Account</Link>
            </div>
        </div>
        <div className="navigation-second">
            <div className="navigation-container">
                <Link to="/work/jobs" activeClassName="active">Job search</Link>
                <Link to="/work/pools" activeClassName="active">Talent pools</Link>
            </div>
        </div>
    </nav>

我希望第二部分是动态的。假设对于每个上层菜单，我想要有各种子菜单。看看我目前拥有的路由器：

<Router history={browserHistory}>
    <Route component={MainLayout}>
        <Route path="/" component={Home} />
        <Route path="work">
            <Route path="jobs">
                <Route component={SearchLayoutContainer}>
                    <IndexRoute component={JobContainer} />
                </Route>
            </Route>
            <Route path="pools">
                <Route component={SearchLayoutContainer}>
                    <IndexRoute component={PoolContainer} />
                </Route>
            </Route>
        </Route>
    </Route>
</Router>

顺便说一句，导航来自嵌套在视图中的组件，可以吗？现在我有这个结构：

structure

欢迎提供任何信息。提前非常感谢。

PD：我已经阅读了 react-router 文档。

【问题讨论】：

标签： reactjs nested navigation react-router

【解决方案1】：

我建议您使用路由参数而不是实际路由。

<Route path="work/:section">

所以section 可以是作业或池。您可以在WorkComponent 中获取此变量，并根据其值呈现不同的结果。

【讨论】：

嗨，德米特里，感谢您的回答。我想要实现的是，例如，当单击个人资料或帐户时，使导航的第二部分具有不同的元素。这可能是一个愚蠢的问题，但我只是在学习 React，我需要让它为我正在开发的单页应用程序工作。

【解决方案2】：

我不确定这是否是一个好习惯，但我有以下想法：

导出默认函数(props) { 让子菜单;

// Submenu
if (props.location.indexOf("work") >= 0) {
    subMenu = (
        <div className="navigation-second">
            <div className="navigation-container">
                <Link to="/work/jobs" activeClassName="active">Job search</Link>
                <Link to="/work/pools" activeClassName="active">Talent pools</Link>
            </div>
        </div>
    )
} else {
    subMenu = (
        <div className="navigation-second">
            <div className="navigation-container">
                <Link to="/test" activeClassName="active">Test</Link>
                <Link to="/test" activeClassName="active">Test</Link>
                <Link to="/test" activeClassName="active">Test</Link>
            </div>
        </div>
    )
}

return (
    <nav className="navigation">
        <div className="navigation-first">
            <div className="navigation-container">
                <Link to="/" activeClassName="active">Dashboard</Link>
                <Link to="/work" activeClassName="active">Work</Link>
                <Link to="/profile" activeClassName="active">My profile</Link>
                <Link to="/account" activeClassName="active">Account</Link>
            </div>
        </div>
        {/* Submenu */}
        {subMenu}
    </nav>
);

props.location 来自：props.location.pathname

【讨论】：