react路由的基本介紹

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

• 前端 路由的功能：讓用戶從一個視圖（頁面）導航到另一個視圖（頁面）
• 前端路由是一套映射規則，在React中，是URL路徑與組件的對應關係
• 使用React路由簡單來說，就是配置路徑和組件

路由的基本使用步驟：

import React from 'react';
import ReactDOM from 'react-dom';
// 1.先安裝react-router-dom
// 2.導入BrowserRouter as Router,Route,Link
import {BrowserRouter as Router,Route,Link} from 'react-router-dom'
// 路由的基本使用
const First=()=><div>1233</div>
const App=()=>{
    return (
        // 3.使用Router包裹組件元素
        <Router>
        <div>
            <h1>路由基礎</h1>
            {/* 4.使用Link設置路徑入口 會被編譯爲a標籤 */}
            <Link to="/first">頁面7</Link>
            {/* 5.使用Route中path表示路徑跳轉，component  表示要展示的組件 Route寫在哪，展示的內容就渲染在哪 */}
            <Route path="/first" component={First}></Route>
        </div>
        </Router>
    )
}
ReactDOM.render(<App />, document.getElementById('root'));

路由中常用組件的說明：

• Router組件：包裹整個應用：一個React應用只使用一次
• 兩種常用的Router：HashRouter和BrowserRouter
• HashRouter：使用URL的哈希值實現，就是在地址欄的後面有#（localhost:3000/#/sdjdjdj）
• 推薦使用BrowserRouter：使用H5的historyAPI實現（localhost:3000/djjdd）
• Link:組件：用於指定導航鏈接（a標籤） 在瀏覽器解析時，會將link組件解析成a標籤
• Router組件：指定路由展示相關的組件信息

路由執行過程：

1.點擊link組件（a標籤），修改了瀏覽器地址欄中的url

2.React路由監聽到地址欄中url的變化

3.React 路由內部遍歷所有Router組件，使用路由規則（path）與pathname進行匹配

4.當路由規則（path）能夠匹配地址欄中的pathname時，就展示該Route組件的內容

 編程式導航：

• 通過JS代碼來實現頁面跳轉
• history是React路由提供的，用於獲取瀏覽器歷史記錄的相關信息
• push（path）：跳轉到某個頁面，參數path表示要跳轉的地址
• go（n）：前進或後退到某個頁面，參數n表示前進或後退頁面數量

class Login extends Component {
handleLogin = () => {
// 使用編程式導航實現頁面之間的跳轉
this.props.history.push('/home')
}
render() {...省略其他代碼} }
在函數組件中使用
props.history.push("/home")
---"/home"  表示將要跳轉的頁面路徑

 默認路由：表示進入頁面就會匹配的路由 

默認路由的path爲：/

<Route path="/" component={Home} />
表示在頁面一開始加載就跳轉到Home組件，展示Home組件的內容