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>

• « 上一篇：MYSQL一次千万级连表查询优化
• » 下一篇：程序员要让你的电脑死机需要多久？黑客：只需要3个按键，5个字符