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>