react路由5版本詳解

react路由5版本怎麼使用呢？

先安裝react路由5依賴包：

npm i react-router-dom@5 -S

然後就可以使用了。

說下簡單用法吧，示例：

import { HashRouter as Router , Route, Link } from 'react-router-dom'
  
export default function App () {
  return (
    <div>
      <h1>react路由基本使用</h1>
      <Router>
        <Link to="/comment">評論</Link>
        <Link to="/search">搜索</Link>
        <Route path="/comment" component={Comment} />
        <Route path="/search" component={Search} />
        <Redirect from="/" exact to="/comment" />
        <Redirect to="/404" />
      </Router>
    </div>
  )
}
ReactDom.render(<App />, document.getElementById('root'))

以上代碼基本囊括了react路由5的基本用法。

我們來總結一下：

1.最外層必須用HashRouter或BrowserRouter標籤包裹套住（注意整個項目中只能有一個HashRouter或BrowserRouter標籤）；

2.交互部分：<Link />或<NavLink /> （相當與vue裏的router-link）

使用<Link />或<NavLink />來做鏈接跳轉，要跳轉到哪裏，直接在to屬性上註明，不過需要注意用<NavLink />更好一些，能夠高亮顯示，Link組件無法展示哪個link處於選中的效果；

注意end屬性會影響高亮顯示；

注意<Link />或<NavLink />只能放置於HashRouter或BrowserRouter標籤之內，而不能在外；

3.路由視圖部分：<Route /> （相當與vue裏的router-view）

路由匹配規則：

默認路由路徑匹配規則是: 模糊匹配規則

- 只要pathname以path開頭就算匹配成功
- 匹配成功就加載對應組件；
- 整個匹配過程是逐一匹配，一個匹配成功了，並不會停止匹配。

要想使得一個匹配成功就停止匹配，那就用Switch包裹。

精確匹配 :exact
只有路徑完全一致才被匹配上

Redirect重定向

示例寫法：<Redirect from="/" exact to="/comment"/>

注意：Redirect一般寫在所有路由註冊的最下方,當所有路由都無法匹配時,跳轉到Redirect指定的路由

路由組件: 接收帶三個固定的屬性
        history:
            go: ? go(n)
            goBack: ? goBack()
            goForward: ? goForward()
            push: ? push(path, state)
            replace: ? replace(path, state)
        location: 
            pathname: "/home"
            search: ""
            state: undefined
        match:
            params: {}
            path: "/home"
            url: "/home"

路由帶參跳轉：（react動態路由）

首先我們要知道一個前提，路由傳遞的參數我們可以通過props裏面的屬性來獲取。只要組件是被<Router>組件的<component>定義和指派的，這個組件自然就有了props的match，history和location屬性。

可通過props.history.push進行編程跳轉 ----> 事件點擊跳轉（編程式導航）
- 通過this.props.history.push跳轉路由

- 可通過 props.match.params.id獲取參數(對應聲明式路由Route)
- 可通過 props.location.state.name獲取參數(對應編程路由props.history.push)
- 可通過 props.location.search.name獲取參數(對應編程路由props.history.push)
- 可通過 props.location.pathname獲取路徑

總的來說，傳參主要是params參數、search參數、state參數這三種：

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
備註：刷新也可以保留住參數

 

最後，附帶提一句

HashRouter和BrowserRouter的區別：

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可以用於解決一些路徑錯誤相關的問題。

 

兩種常用 Router：HashRouter 和 BrowserRouter底層都是怎麼實現的呢？

- HashRouter：使用 URL 的哈希值實現
----> 監聽 window 的 hashchange 事件來實現的

- BrowserRouter：使用 H5 的 history.pushState() API 實現
----> 監聽 window 的 popstate 事件來實現的

好了，react路由5版本的知識點基本上就這些。編程使我快樂，歡迎互粉和留言、加羣交流。