瀏覽器端的前端路由模式：hash模式，history模式

安裝路由模塊

路由模塊不是react自帶模塊，需要安裝第3方模塊

// react-router-dom 它現在最新的版本6
npm i -S react-router-dom@5

react-router-dom路由庫，它路由相關的配置當作組件調用設置

一些相關組件

路由模式組件

包裹整個應用，一個React應用只需要使用一次

• HashRouter： 使用URL的哈希值實現 （localhost:3000/#/first）
• BrowserRouter：使用H5的history API實現（localhost3000/first）

導航組件

用于指定導航鏈接, 最終Link會編譯成a標簽

• Link: 不會有激活樣式
• NavLink：如果地址欄中的地址和to屬性相匹配，則會有激活樣式

路由規則定義組件

Route：

• path屬性：路由路徑，在地址欄中訪問的地址
• component屬性：和規則匹配成功后渲染的組件 /render/children
• children>component>render

各組件關系示意圖

??定義路由的模式，為了日后讓當前項目中所有的組件都受到路由控制，定義在index.js中,在最頂層讓路由模式。src/index.js

引入路由相關組件 路由模式組件，告訴當前項目，我們要使用的路由模式

HashRouter, hash路由模式

BrowserRouter history路由模式，上線時，需要對nginx進行配置
import { BrowserRouter as Router, HashRouter } from 'react-router-dom'
ReactDOM.render(
	<Router>
		<App />
	</Router>,
document.getElementById('root')
)

Route 定義路由規則 ——路由地址和匹配成功后要渲染的組件

匹配默認為模糊匹配，而且它還會一直匹配到沒有規則組件為止

import{Route} from "react-router-dom"

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

嚴格匹配:exact

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

Link 導航組件，它編譯生成后的html標簽只能是 a

<Link to="/home">Home</Link>
<Link to="/about">About</Link>
<Link to={"/about"}>About</Link>

NavLink 導航組件，它編譯生成后的html標簽只能是 a,但是它有激活樣式active(地址欄中的地址和to屬性匹配，

匹配規則，默認為模糊匹配

嚴格匹配:exact

修改激活樣式名稱：activeClassName=‘aaa’

<NavLink exact to="/">Home</NavLink>
<NavLink to="/about">About</NavLink>

Redirect 重定向 使用它，一定要用到Switch，否則有循環的問題

<Redirect exact from="/" to="/home" />

并且以上的路由沒有一個匹配成功的，則用404頁面 path屬性不要寫，寫在switch中

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

this.props.history.push(‘/about’) 編程式到行

如果你想用對于匹配渲染成功后的組件使用編程式導航，你默認情況下，你只能在規則匹配成功后的組件本身中使用，它的子組件都不行。父組件也不行。

??路由動態參數：

必須先聲明再使用：

<Route exact path={<!--{C}%3C!%2D%2D%20%2D%2D%3E-->"/detail/:uid?"} component={<!--{C}%3C!%2D%2D%20%2D%2D%3E-->Detail}></Route>

如何在頁面上獲取路由參數：

打印組件的this.props

獲取動態路由參數

this.props.match.params.uid

?? 如何獲取search字符串 字符串

通過：this.props.location.search獲取
解析：
const search = new URLSearchParams(this.props.location.search)
let name = search.get("name")
或者生成對象模式：
const search = new URLSearchParams(this.props.location.search)
let searchData = {};
for(let [key,value] of search.entries()){
	searchData[key] = value
}
console.log(searchData);

或者生成工具轉變為對象：

String.prototype.toSearch = function () {
    let searchData = {}
    if (this.toString() != '') {
        const search = new URLSearchParams(this.toString())
        search.forEach((value, key) => {
            searchData[key] = value
        })
    }
    return searchData
}