react-router 4路由共享菜单栏的问题

Question

需求描述:
1.pc网站大概三个路由模块 /(主页) /login /console
2./下面有两个个子路由/docs /service这两个路由共用同一个导航栏，导航栏切换
3./login自己单独一个页面
4./console自己单独一个页面下面也有很多子路由

我的方案:

  <Router>
    <div className="portal">
      <Switch>
      <Route path="/login" component={Login} />
      <Route exact path="/" component={Home} />
      <Route path="/docs" component={Docs} />
      </Switch>
      {/* <Route path="/topics" component={Topics} /> */}
    </div>
  </Router>

我的问题:
1.怎么控制/下的/docs和/service共用一个导航栏，3版本可以用this.props.children
2.怎么控制/login,/console不需要导航栏

Answer 1

React Router v4中，Route只不过是一个普通的React组件，所以你可以像使用其他组件一样，在任意地方使用Route，这也是React Router v4建议的分散式的Route管理。基于此，你的Route可以修改如下：

  <Router>
    <div className="portal">
      <Switch>
        <Route path="/login" component={Login} />
        <Route path="/console" component={Console} />
        <Route path="/" component={Home} />
      </Switch>
    </div>
  </Router>

  // Home.js 的render
  render() {
    <div>
      <Navigation />
      <Route path="/docs" component={Docs} />
      <Route path="/service" component={Service} />
    </div>
  }

React Router v4的使用，重要是思想上的转变，推荐你看下我的这篇文章:聊聊 React Router v4 的设计思想。

Answer 2

你home组件里面直接写docs和service的route就好了