1、首先我在路由元件componentwillreceiveprops函式中里監聽路由變化，這個鉤子可以監聽props的變化，隨之便可以每次更換路由時被觸發
2、然後在路由元件裡寫個定時器控制動畫效果
實現效果如下圖。如果你想讓全屏進入動畫效果，那就修改一下相關元素的css浮動定位全屏就行了
**中的loading也完全可以通過redux控制，因為可能有時候我們需要等request請求結束再顯示介面，當我這個專案不需要
import react,
from
"react"
;import
from
"react-router"
;import
from
"antd"
;import home from
"../pages/home"
;import about from
"../pages/about"
;import products from
"../pages/products"
;import solution from
"../pages/solution"
;import solutiondetails from
"../pages/solutiondetails"
;import download from
"../pages/download"
;import details from
"../pages/details"
;import contact from
"../pages/contact"
;import errorpage from
"../pages/error"
;class
routers
extends
component
; timer =
null
;/**
* 生命週期函式
*/// 元件掛載
componentdidmount()
// 監聽props變化
componentwillreceiveprops
(nextprops)
}/**
* 功能
*/// 載入中函式
loadingshow()
,()=>);
},1000);
});}
render()
>
"loading..." spinning=
>
"/" component=
/>
"/products/:id" component=
/>
"/about" component=
/>
"/solution" component=
/>
exact
path=
"/solutiondetails/:id"
component=
/>
"/download" component=
/>
"/about" component=
/>
"/details/:id" component=
/>
"/contact" component=
/>
/>
<
/switch>
<
/spin>
<
/div>);
}}export
default
withrouter
(routers)
;
react中js跳轉路由
1 要引入redirect import from react router dom 2 定義乙個flag this.state 3 render裡面判斷flag 來決定是否跳轉 if this.state.loginflag 4 要執行js跳轉 通過js改變loginflag的狀態 改變資料以後會...
React 如何新增路由懶載入
1.第一種自己定義元件在載入時呼叫 1.1在工具類資料夾utils下面建立乙個asynccomponent.js檔案寫入一下 import react,from react export const asynccomponent fn 呼叫元件時會渲染當渲染完成後會執行componentdidmou...
easyui新增載入中遮罩層
最近專案中需要用到ajax與後台傳遞資料，後代在處理請求時時間有過長，為了使用者體驗好一點，就用到了easyui彈出載入中的遮罩的兩種方法。第一種 ajax complete function success function data 彈出載入層 function load 取消載入層 funct...