react-router中公共部分Header和SideBar的编写方式

react-router中公共部分Header和SideBar的编写方式

初学react-router，在项目中涉及登录页面是独立的，其他页面拥有共同的Header和SideBar组件，在这里把这两个公共部分封装到App中。

一种实现方式，把App通过import到每个页面，对每个页面进行封装。
Routes定义如下:

    <ConnectedRouter history={history}>
        <div>
            <Route exact path="/login" component={LoginPage} />
            <Route exact path="/" component={privateRoute(App)} />
            <Route path="/users" component={privateRoute(UserListPage)} />
            <Route path="/chpwd" component={privateRoute(ChpwdPage)} />
            <Route path="/user" component={privateRoute(User)} />
            <Route path="/logout"  onEnter={props.logout} />

        </div>
    </ConnectedRouter>

在调试时，发现在每个页面的render中需要用App包装，比较繁琐，同时每个页面使用Router跳转时，
Header和SideBar组件在没有变化时，也在重复渲染。

如果使用下面方法编写Routes，可以解决公共部分不需要重复渲染，同时每个页面不必用App单独封装。

    <ConnectedRouter history={history}>
        <div>
            <Route exact path="/login" component={LoginPage} />
            <Route exact path="/" component={privateRoute(App)} />
            <Route path="/app" component={privateRoute(App)} />
            <Route path="/app/users" component={privateRoute(UserListPage)} />
            <Route path="/app/chpwd" component={privateRoute(ChpwdPage)} />
            <Route path="/app/user" component={privateRoute(User)} />
            <Route path="/logout"  onEnter={props.logout} />

        </div>
    </ConnectedRouter>

由于Route是可以多个同时匹配的一起使用，比如: ‘/app/users’, 会同时渲染’/app’和’/app/users’两个路由模块。在这里’/app’模块是公共部分，当无数据变化时，react可以自行判断避免重复渲染。

第三种方法是把路由嵌入到页面layout中，把对应路由放在页面对应的位置。

      <Provider store={store}>
        <ConnectedRouter history={history}>
        <div id="application">
          <Route exact path="/login" component={LoginPage} />
        {devTools}
          <HeaderPage />
            <div className="container">
              <nav className="nav left">
                <LeftPage />
              </nav>
              {/* <TopMenu items={menuItems} /> */}
              <section className="main">
                <Route path="/users" component={privateRoute(UserListPage)} />
                <Route path="/chpwd" component={privateRoute(ChpwdPage)} />
              </section>
            </div>
        </div>
          </ConnectedRouter>
      </Provider>