關於React中路由 router 介紹

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

重難點：

1:如何安裝react-router-dom

2:路由傳值，如何傳值

3:路由巢狀 路由跳轉

4:路由傳參 獲取引數

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

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

缺點：

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

cnpm install react-router-dom -s

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

link表示乙個路由的鏈結

**示例如下:

import  from 'react-router-dom'

import react from 'react'

;//引入內建檔案
import  from 'react-router-dom'
;//引入三個子元件
import home from './home'
import about from './about'
import news from './news'
//宣告乙個類元件
//重新渲染頁面
render()
'/home'
>首頁<
/link>  
'/about'
>關於<
/link>  
'/news'
>新聞<
/link>  
//路由跳轉到相應頁面  這裡面的path指的是路徑  component是指向某個元件
'/home' component=
>
<
/route>
'/about' component=
>
<
/route>
'/news' component=
>
<
/route>
<
/div>
<
/hashrouter>)}
}//向外暴露

3.2 hashrouter：雜湊路由下面給大家看乙個二級路由跳轉的** 希望能給你帶來幫助

4.1 入口檔案 **示例：

import react from 'react'

;//先引入要用到的路由 鏈結
import  from 'react-router-dom'
;import news from './news'
//宣告乙個類元件
//從新渲染頁面
render()
'/news'
>新聞<
/link>  
'/news' component=
>
<
/route>
<
/div>
<
/hashrouter>)}
}//向外暴露

//引入要用到的路由 鏈結

import react from 'react'
;import pig from './news/pig'
import  from 'react-router-dom'
;//宣告乙個類元件
class news extends react.component
>
<
/route>
<
/div>)}
}//向外暴露
export default news;

**示例如下：

import react from 'react'

;//宣告乙個類元件
class pig extends react.component
}//向外暴露
export default pig;

5.1 params

'/path/:name' component=

/>
"/path/2"
>***<
/link>
this.props.history.
push()
;//讀取引數用:this.props.match.params.name

'/query' component=

/>
>
this.props.history.
push(}
);//讀取引數用: this.props.location.query.name

'/sort ' component=

/>
> 
this.props.history.
push(}
);//讀取引數用: this.props.location.query.state

'/web/departmanange ' component=

/>
"web/departmanange?tenantid=12121212"
>***<
/link>
this.props.history.
push()
;//讀取引數用: this.props.location.search

React中路由的基本使用

1 react路由介紹 現在我們來搞一搞react中的路由吧，別問我為什麼這木喜歡用搞這個字，因為它比較深奧。注意下面我們使用的是react router dom react中的路由基本使用還是滿簡單的，零碎的小東西有點多，所以我直接把他們揉到一起做了乙個小例子，我都寫上注釋了，應該挺簡單易懂的 注...

路由修改route

route nee route add net host 網段或主機 netmask mask gw dev route del net host 網段或主機 netmask mask gw dev 觀察的引數 n,不要使用通訊協議或主機名稱，直接使用ip或port number ee,使用更詳細的...

linux 中路由設定

新增主機路由 設定乙個主機路由對於某個特定的主機指定路由資訊。route add host 192.168.1.100 dev eth0 有目的地 192.168.1.100，沒有gw 也就是沒有閘道器 新增主機還可以通過指定閘道器來實現 route add host 192.168.1.11 gw...