react路由跳转保持页面头部和底部不变的情况下只有主体部分变化

在用react开发项目的时候，一般会有大部分页面的头部和底部是相同的内容，只有中间的主体会发生变化；
这样如果在每个页面或者组件都加上相同的头部和底部就比较麻烦；
最好是能在一个组件里面就包含了头部代码和底部代码，然后页面跳转的时候只有中间的主体代码改变或者是主体组件发生改变；
这样的话就不用每一个页面都加上相同的头部组件或者底部组件了；

以下是react实现的方式：

首先，新建一个类组件，类组件的render()里面把页面UI分成三部分；
分别是头部、中部、底部：
<Header>放页面头部内容；
<Footer>放页面底部内容；
<Content>放主体内容，也就是页面跳转或者地址栏改变的时候页面UI改变的位置；

引入的
import MatchPath from './components/MatchPath'
这个组件就是在页面跳转或者地址栏改变的时候，负责对应变成不同页面UI的组件；
<MatchPath>自定义组件传递的matchPath属性就是用来接收不同路由页面组件用的；
matchPath属性的传参是从新建的类组件属性props的match中的path中取的，也就是地址栏上面的地址；

具体代码如下图所示：
图1

图2

 
图3

以上图中的switch通过获取父组件传递的matchPath来选择不同的页面组件；

图中代码分别引入了两个页面的组件：
import List from '../list/list'
import Details from '../details/details'

页面效果如下图：
分别是主页面、list页面、details页面的UI显示情况；
图4

图5

图6

关注微信公众号（月影WEB），了解更多的前后端知识；
欢迎大家关注互相交流学习；

这篇好文章是转载于：学新通技术网