React-router-dom的使用

文章目錄

• • 一、路由的基本使用
  • 二、路由元件與一般元件
  • 三、NavLink與封裝NavLink
  • 四、Switch的使用
  • 五、解決多級路徑重新整理頁面樣式丢失的問題
  • 六、路由的嚴格比對與模糊比對
  • 七、Redirect的使用
  • 八、嵌套路由
  • 九、向路由元件傳遞參數
  • 十、程式設計式路由導航
  • 十一、BrowserRouter與HashRouter的差別
  • • 十二、withRouter的使用

一、路由的基本使用

1.明确好界面中的導航區、展示區

2.導航區的a标簽改為Link标簽

3.展示區寫Route标簽進行路徑的比對

4.

<App>

的最外側包裹了一個

<BrowserRouter>

或

<HashRouter>

二、路由元件與一般元件

1.寫法不同：

一般元件：

<Demo/>

路由元件：

<Route path="/demo" component={Demo}/>

2.存放位置不同：

一般元件：

components

路由元件：

pages

3.接收到的props不同：

一般元件：寫元件标簽時傳遞了什麼，就能收到什麼

路由元件：接收到三個固定的屬性

history:
		go: ƒ go(n)
		goBack: ƒ goBack()
		goForward: ƒ goForward()
		push: ƒ push(path, state)
		replace: ƒ replace(path, state)
location:
		pathname: "/about"
		search: ""
		state: undefined
match:
		params: {}
		path: "/about"
		url: "/about"
           

三、NavLink與封裝NavLink

NavLink

可以實作路由連結的高亮，通過

activeClassName

指定樣式名

四、Switch的使用

1.通常情況下，

path

和

component

是一一對應的關系。

2.

Switch

可以提高路由比對效率(單一比對)。

五、解決多級路徑重新整理頁面樣式丢失的問題

1.public/index.html 中 引入樣式時不寫 ./ 寫 / （常用）

2.public/index.html 中 引入樣式時不寫 ./ 寫 %PUBLIC_URL% （常用）

3.使用HashRouter

六、路由的嚴格比對與模糊比對

1.預設使用的是模糊比對（簡單記：【輸入的路徑】必須包含要【比對的路徑】，且順序要一緻）

2.開啟嚴格比對：

<Route exact={true} path="/about" component={About}/>

3.嚴格比對不要随便開啟，需要再開，有些時候開啟會導緻無法繼續比對二級路由

七、Redirect的使用

1.一般寫在所有路由注冊的最下方，當所有路由都無法比對時，跳轉到Redirect指定的路由

2.具體編碼：

<Switch>
	<Route path="/about" component={About}/>
	<Route path="/home" component={Home}/>
	<Redirect to="/about"/>
</Switch>
           

八、嵌套路由

1.注冊子路由時要寫上父路由的path值

2.路由的比對是按照注冊路由的順序進行的

九、向路由元件傳遞參數

1. params參數

   路由連結(攜帶參數)：

   <Link to='/demo/test/tom/18'}>詳情</Link>

   注冊路由(聲明接收)：

   <Route path="/demo/test/:name/:age" component={Test}/>

   接收參數：

   this.props.match.params

2. search參數

   路由連結(攜帶參數)：

   <Link to='/demo/test?name=tom&age=18'}>詳情</Link>

   注冊路由(無需聲明，正常注冊即可)：

   <Route path="/demo/test" component={Test}/>

   接收參數：

   this.props.location.search

   備注：擷取到的search是urlencoded編碼字元串，需要借助querystring解析

3. state參數

   路由連結(攜帶參數)：

   <Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>詳情</Link>

   注冊路由(無需聲明，正常注冊即可)：

   <Route path="/demo/test" component={Test}/>

   接收參數：

   this.props.location.state

   備注：重新整理也可以保留住參數

十、程式設計式路由導航

借助

this.prosp.history

對象上的API對操作路由跳轉、前進、後退

-this.prosp.history.push()
-this.prosp.history.replace()
-this.prosp.history.goBack()
-this.prosp.history.goForward()
-this.prosp.history.go()
           

十一、BrowserRouter與HashRouter的差別

1. 底層原理不一樣：

   BrowserRouter使用的是H5的history API，不相容IE9及以下版本。

   HashRouter使用的是URL的哈希值。

2. path表現形式不一樣

   BrowserRouter的路徑中沒有#,例如：localhost:3000/demo/test

   HashRouter的路徑包含#,例如：localhost:3000/#/demo/test

3. 重新整理後對路由state參數的影響

   (1).BrowserRouter沒有任何影響，因為state儲存在history對象中。

   (2).HashRouter重新整理後會導緻路由state參數的丢失！！！

4. 備注：HashRouter可以用于解決一些路徑錯誤相關的問題。

十二、withRouter的使用

import {withRouter} from 'react-router-dom'
export default withRouter(Header)

//withRouter可以加工一般元件，讓一般元件具備路由元件所特有的API
//withRouter的傳回值是一個新元件