React路由相關知識點

2021-10-01 17:08:39 字數 2727 閱讀 7599

1.1、單頁面應用

單頁面得特點：只需要載入一次主頁面，通過區域性重新整理，就可以實現跳轉或者切換頁面

優點：載入速度快，使用者體驗比較好

缺點：1.2、安裝react-router-dom

在專案命令列中，執行: `cnpm install react-router-dom -s`
在元件中通過物件的解構方式去獲取到react-router-dom內建元件，在元件中，按需引入內建元件，在頁面中進行使用：

route表示乙個路由規則，在route上，有兩個比較重要的屬性，path，component

link表示乙個路由的鏈結

import  from 'react-router-dom'
示例：

//引入模組


import react from


'react'


;import


from


'react-router-dom'


import home from


'./component/home'


;import news from


'./component/news'


;import about from


'./component/about'


;class


extends


react.component


>


<


/route>


"/news" component=


>


<


/route>


"/about" component=


>


<


/route>


<


/hashrouter>);


}}export
就行了。

route建立的標籤，就是路由規則，其中path表示要匹配的路由，component表示要展示的元件。route具有兩種身份：

1.它是乙個路由匹配規則；


2.它是乙個佔位符，表示將來匹配到的元件都放到這個位置
需要注意的地方

1.1、react-router-dom路由傳值（帶引數路由）

通過配置路由的位址，在link跳轉時

示例：

render()


exact>


<


/route>


<


/div>


<


/hashrouter>);


}
類元件中通過生命週期進行接收，this.props攜帶路由傳遞過來的資料：

class


movie


extends


react.component


}render()


--<


/div>);


}}
巢狀路由：在路由元件中，使用link， route，配置子路由，實現跳轉，切換；

下面為一級路由，在一級路由home為路由元件

完整示例：

//引入模組


今天就分享到這兒，如有不同意見歡迎提出！！
				
React   相關知識點
1 元件中get的使用 作為類的getter es6知識 class類也有自己的getter和setter，寫法如下 class component name的getter getname name的setter setname value react元件中的get的使用如下 renderfulln...

				
React相關知識點
reactcss模組化內聯樣式的方案 use strict import react from react import reactcss from reactcss render swatch popover cover return this.handleclick this.state.col...

				
React知識點彙總
核心 元件系統，all in js,自動更新dom,三個階段，十乙個鉤子函式，更新狀態，react中的事件，可控和不可控元件 不需要特殊的開發環境，使用常見ide並安裝相應的外掛程式即可，react相容ie8及以上，其他主流的瀏覽器也相容，相容性較好。簡單來說就是all in js,將html，cs...