React中路由的基本使用

1、react路由介紹

現在我們來搞一搞react中的路由吧，別問我為什麼這木喜歡用搞這個字，因為它比較深奧。

注意下面我們使用的是react-router-dom

react中的路由基本使用還是滿簡單的，零碎的小東西有點多，所以我直接把他們揉到一起做了乙個小例子，**我都寫上注釋了，應該挺簡單易懂的

注意：以下所有操作均執行在搭好的react環境中

2、安裝react-router-dom

在專案命令列中，執行cnpm install react-router-dom -s

在元件中通過物件的解構方式去獲取到react-router-dom內建元件，在     元件中，按需引入內建元件，在頁面中進行使用：

3、關於元件的區別

hashrouter表示乙個路由的根容器，將來所有的路由相關的東西，都要包裹在hashrouter裡面，而且乙個**中，只需要使用一次hashrouter就好了；

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

link則表示乙個路由的鏈結

4、

仿照官網來個小案例(宣告式路由)

4.1、建立乙個新的baokuo.js檔案，並在index.js中匯入這個路由檔案

4.2、建立好要跳轉的頁面

4.3、在baokuo.js檔案中貼上官方的第乙個路由案例;

1 import react from

'react
'2 import home from
'./penter/home
' //因為在乙個資料夾下面建立的，所以要找到準確位置。
3 import text from
'./penter/text
'4 import hellow from
'./penter/hellow
'5 import from
'react-router-dom
'6 import from
'antd';
7 import '
antd/dist/antd.css'8
9class
baokuo extends react.component20"
/home
">首頁  21"
/text
">新聞  22"
/hellow
2324 25"
/home
" component= /> 
2627
"/text
" component=>
2829
"/hellow
" component=>
3031 
3233
);34}35
}3637 export default baokuo;

1

總體的步驟分為三步:
2配置路由的容器router;
3配置路由的連線link;
4 配置路由填充的位置以及路徑和元件的對映關係;:

5.1、巢狀路由的步驟

a.在父路由的元件中配置子路由;

b.子路由中同樣需要配置link和route;

6、帶引數路由和獲取引數；

方式:在路由的路徑中通過[:引數名稱]來進行傳遞,改引數在路由匹配的元件中通過[match.params.引數名]來獲取。

英文官網案例：

關於React中路由 router 介紹

現在我們來搞一搞react中的路由吧，別問我為什麼這木喜歡用搞這個字，因為它比較深奧。重難點 1 如何安裝react router dom 2 路由傳值，如何傳值 3 路由巢狀 路由跳轉 4 路由傳參 獲取引數 1.1單頁面應用單頁面得特點 只需要載入一次主頁面，通過區域性重新整理，就可以實現跳轉或...

Vue專案中路由的基本使用

1.安裝vue router庫 將vue router庫安裝到專案中，執行命令 npm install vue router s2.配置路由對映 在src router目錄下，建立乙個index.js路由對映檔案，內容如下 import vue from vue import vuerouter f...

vue中路由的簡單使用

vue中路由 vue router 的使用 router.js中配置路由規則，專案中所有的路由規則通常都統一配置到同乙個檔案中，習慣將這個檔案命名為router.js，router.js內容如下 import vue from vue import router from vue router im...