Question

拥有以下图片及其各自的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文档。

Answer 1

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

<Route path="work/:section">

因此section可能是工作或池。您可以在WorkComponent中获取此变量，并根据其值显示不同的结果。

Answer 2

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

导出默认功能（道具）{ 让subMenu;

// 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

React路由器动态导航面板

2 个答案: