關於React中路由(router)介紹

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

重難點：

1:如何安裝react-router-dom

2:路由傳值，如何傳值

3:路由嵌套 路由跳轉

4:路由傳參 獲取參數

一：React 路由介紹

1.1單頁面應用

單頁面得特點：只需要加載一次主頁面，通過局部刷新，就可以實現跳轉或者切換頁面
優點：加載速度快，用戶體驗比較好
缺點：

• 第一次加載比傳統要慢一點
• 不利seo
• 頁面相對複雜
• 返回鍵

1.2 安裝react-router-dom

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

cnpm install react-router-dom -S

二：路由的內置組件

引入內置組件

• HashRouter表示一個路由的根容器，將來所有的路由相關的東西，都要包裹在HashRouter裏面，而且一個網站中，只需要使用一次HashRouter就好了；
• Route表示一個路由規則，在Route上，有兩個比較重要的屬性，path，component
• Link表示一個路由的鏈接

代碼示例如下:

import {HashRouter,Route,Link} from 'react-router-dom'

引入路由，鏈接，代碼示例如下：

import React from 'react';
//引入內置文件
import {HashRouter,Route,Link} from 'react-router-dom';
//引入三個子組件
import Home from './Home'
import About from './About'
import News from './News'
//聲明一個類組件
class App extends React.Component{
//重新渲染頁面
render(){
return(
// 根容器
<HashRouter>
<div>

  <h2>我想吃肉</h2>
<hr />
{/* 鏈接 */}
<Link to='/Home'>首頁</Link>&nbsp;&nbsp;
<Link to='/About'>關於</Link>&nbsp;&nbsp;

<Link to='/News'>新聞</Link>&nbsp;&nbsp;
//路由跳轉到相應頁面  這裏面的path指的是路徑  component是指向某個組件
<Route path='/Home' component={Home}></Route>
<Route path='/About' component={About}></Route>
<Route path='/News' component={News}></Route>

</div>
</HashRouter>
)}

}
//向外暴露
export default App;

三：BrowserRouter 和 HashRouter的區別

3.1 BrowserRouter：h5路由（history API）

• 在開發過程中使用是沒有問題的，但是將頁面上傳至服務器之後，問題就來了：用戶訪問的資源不存在，頁面是空白的。 經過排查懷疑是路徑的問題，將BrowserRouter 改爲 HashRouter之後，問題解決了~

3.2 HashRouter：哈希路由

• hashHistory 使用 URL 中的 hash（#）部分去創建路由

四：嵌套路由

下面給大家看一個二級路由跳轉的代碼 希望能給你帶來幫助

4.1 入口文件 代碼示例：

import React from 'react';
//先引入要用到的路由 鏈接
import {HashRouter,Route,Link} from 'react-router-dom';
import News from './News'
//聲明一個類組件
class App extends React.Component{
//從新渲染頁面
render(){
return(
// 根容器
<HashRouter>
<div>

  <h2>我想吃肉</h2>
<hr />
{/* 鏈接 */}

<Link to='/News'>新聞</Link>&nbsp;&nbsp;
<Route path='/News' component={News}></Route>

</div>
</HashRouter>
)}

}
//向外暴露
export default App;

4.2 一級路由 代碼示例：

//引入要用到的路由 鏈接
import React from 'react';
import Pig from './news/pig'
import {Route,Link} from 'react-router-dom';
//聲明一個類組件
class News extends React.Component
{
//重新渲染頁面
render(){

return(


<div>
//link裏面的to指的是去某個頁面 
<Link to='/news/pig'>你怕是個憨憨</Link>
//在這裏的陸晶晶跳轉的是news裏面的pig組件  
<Route path='/news/pig' component={Pig}></Route>

</div>
)
}
}
//向外暴露
export default News;

4.3 二級路由 代碼示例：

代碼示例如下：

import React from 'react';
//聲明一個類組件
class pig extends React.Component{
//重新渲染頁面
render(){

return(
<div>哈哈哈哈哈</div>
)
}
}
//向外暴露
export default pig;

五：路由傳參和獲取參數

傳參方式有四種，下面給大家示範一下

5.1 params

<Route path='/path/:name' component={Path}/>
<link to="/path/2">xxx</Link>
this.props.history.push({pathname:"/path/" + name});
//讀取參數用:this.props.match.params.name

5.2.query

<Route path='/query' component={Query}/>
<Link to={{ path : ' /query' , query : { name : 'sunny' }}}>
this.props.history.push({pathname:"/query",query: { name : 'sunny' }});
//讀取參數用: this.props.location.query.name

5.3.state

<Route path='/sort ' component={Sort}/>
<Link to={{ path : ' /sort ' , state : { name : 'sunny' }}}> 
this.props.history.push({pathname:"/sort ",state : { name : 'sunny' }});
//讀取參數用: this.props.location.query.state

5.4.search

<Route path='/web/departManange ' component={DepartManange}/>
<link to="web/departManange?tenantId=12121212">xxx</Link>
this.props.history.push({pathname:"/web/departManange?tenantId" + row.tenantId});
//讀取參數用: this.props.location.search

**今天的分享就到這裏了，還是那句話，歡迎大家隨時補充~嘻嘻嘻