React生命周期钩子componentWillReceiveProps（）与componentDidMount ()监控全局路由变化

最新推荐文章于 2024-07-17 14:06:29 发布

阿喵~~

最新推荐文章于 2024-07-17 14:06:29 发布

阅读量4.1k

点赞数

分类专栏：整理文章标签： React生命周期钩子componentWillReceiveProp

本文链接：https://blog.csdn.net/qq_40616529/article/details/96134762

版权

整理专栏收录该内容

31 篇文章 0 订阅

订阅专栏

我们可以通过监控路由的变化情况，对不同的页面进行不同的操作处理。
实现监控路由变化情况，需要使用react生命周期中两个钩子函数componentWillReceiveProps（）与componentDidMount ()

import React from 'react';

import './App.css';

import Head from './components/common/head/Head';
import TabBar from './components/common/footer/Footer';

import Home from './pages/home/Home';
import Category from './pages/catagory/Category';
import Recommend from './pages/recommend/Recommend';
import ShopCar from './pages/shop_car/ShopCar';
import Mine from './pages/mine/Mine';
import List from './pages/list/List';
import Error from './pages/error/Error'

//引入路由组件工具 
import { Route ,Redirect,Switch,withRouter} from 'react-router-dom';


class App extends React.Component{

   constructor(){
      super()
      this.state = {
         backFlag:false,
         headFlag:true,
         footerFlag:true,
      }
   }



     //通过路由控制头部底部显示的判断，定义方法

     //第一次路由判断通过初始化钩子
     componentDidMount(){
        //判断初始加载路由路径
        this.head_foot_change()
     }

     componentWillReceiveProps(nextProps){
      //路由变化时判断
      this.head_foot_change(nextProps)
   }

   //定义一个方法，通过不同路由页面进行业务操作
    head_foot_change=(nextProps)=>{

      const { pathname } = nextProps ? nextProps.location : this.props.location
       let headArr=['/list/001','/list/002','/list/003','/mine/login','mian/register'];

      let footArr = ['/recommend','/mine'] ;

       let hf = headArr.some( item =>{
          if(item===pathname){
            return true
          }
       });
       if(hf){
          this.setState({
            backFlag:true,
          })
       }else{
         this.setState({
            backFlag:false,
          })
       }

       const f = footArr.some( item => {
         if( item === pathname){
           return true
         }
       })
   
       console.log( f )
   
       if( f ){
         this.setState({
            footerFlag: false
         })
       }else{
         this.setState({
            footerFlag: true
         })
       }
   
    }


   render(){
      return (
         <div className="App">
            <Head backFlag={this.state.backFlag} ></Head>
            <Switch>
               <Redirect  from = "/" to = "/home" exact></Redirect>
               <Route path ="/home" component={ Home } ></Route>
               <Route path ="/category" component={ Category } ></Route>
               <Route path ="/list/:id" component={ List } ></Route>
               <Route path ="/recommend" component={ Recommend } ></Route>
               <Route path ="/shop_car" component={ ShopCar } ></Route>
               <Route path ="/mine" component={ Mine } ></Route>
               <Route  component={ Error }></Route>
            </Switch>
            {this.state.footerFlag&&<TabBar></TabBar>}
         </div>
      )
   }

 
}

export default withRouter(App);//将组件变成伪路由组件，可以使用路由组件的一些属性

阿喵~~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
React生命周期钩子componentWillReceiveProps（）与componentDidMount ()监控全局路由变化

我们可以通过监控路由的变化情况，对不同的页面进行不同的操作处理。实现监控路由变化情况，需要使用react生命周期中两个钩子函数componentWillReceiveProps（）与componentDidMount ()import React from 'react';import './App.css';import Head from './components/common/...
复制链接

扫一扫

专栏目录