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

女爷i 2022-05-25 04:07 119阅读 0赞

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

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

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

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

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

由于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>