React路由

1,路由基礎

現代的前端應用大多都是SPA(單頁應用程序)，也就是只有一個HTML頁面的應用程序。因為它的用戶體驗更好、對服務器的壓力更小，所以更受歡迎。為了有效的使用單個頁面來管理原來多個頁面的功能，前端路由應運而生。

1, 安裝: yarn add react-router-dom
2, 導入路由的三個核心組件：Router/Route/Link
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'3, 使用Router組件包裹整個應用
<Router><div>// ...</div>
</Router>

使用步驟：

4, 使用Link組件作為導航菜單(路由入口)

<Link to="/first">頁面一</Link/>

5, 使用Route組件配置路由規則和要展示的組件(路由出口)

const First = () => <p>頁面一的內容</p>
<Router><div>react<Link to='/first'>頁面1</Link><Route path='/first' component={First} /></div>
</Router>

2，路由組件說明

• Router組件：包裹整個應用，一個React應用只需要使用一次
  • 兩種常見Router：HashRouter、BrowserRouter
  • HashRouter: 使用URL的哈希值實現(localhost:3000/#/first)
  • 推薦使用BrowserRouter：使用H5的history api實現(localhost:3000/first)
• Link組件：用于指定導航鏈接(a標簽)
  • to屬性：瀏覽器地址欄中的pathname(location.pathname)
• Route組件：指定路由展示組件相關信息
  • path屬性：路由規則
  • component屬性：展示的組件
  • Route組件寫在哪，渲染出來的組件就展示在哪

3，路由的執行過程

• 1,點擊Link組件，修改了瀏覽器地址欄中的url
• 2，React路由監聽到地址欄url的變化
• 3，React路由內部遍歷所有Route組件，使用路由規則(path)與pathname進行匹配
• 4，當路由規則(path)能匹配地址欄中的pathname時，就展示該Route組件的內容

image

4，編程式導航

• 編程式導航：通過JS代碼實現頁面跳轉
• history是react路由提供的，用于獲取瀏覽器歷史記錄的相關信息
• push(path)：跳轉到某個頁面，參數path表示要跳轉的路徑
• go(n)：前進或后退到某個頁面，參數n表示前進或者后退頁面的數量

class Child extends Component{handleLogin = () => {this.props.history.push('/home')}
}

5, 默認路由

• 默認路由：進入頁面的時候就會匹配的路由
  • 默認路由path為: /

  <Route path="/" component={Home} />
  

示例：

const Home = () => <p>進入頁面的時候就展示的Home組件的內容</p>
const App = () => (<Router><div><p>編程式導航</p><Route path="/" component={Home} /></div></Router>
)

6，匹配模式

• 模糊匹配
  • 默認情況下，react的路由是模糊匹配的
  • 模糊匹配規則，只要pathname以path開頭就會匹配成功
    • path代表route組件的path屬性
    • pathname代表 Link組件的to屬性(即location.pathname)
      比如：path為/，能夠匹配所有的pathname。path為：/first，能夠匹配所有的/first或/first/a或/first/a/b/...
• 精確匹配
  • 給Route組件添加exact屬性即可

下篇開始項目實戰