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

安裝路由模塊

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

// react-router-dom 它現(xiàn)在最新的版本6
npm i -S react-router-dom@5

react-router-dom路由庫，它路由相關(guān)的配置當(dāng)作組件調(diào)用設(shè)置

一些相關(guān)組件

路由模式組件

包裹整個(gè)應(yīng)用，一個(gè)React應(yīng)用只需要使用一次

• HashRouter： 使用URL的哈希值實(shí)現(xiàn) （localhost:3000/#/first）
• BrowserRouter：使用H5的history API實(shí)現(xiàn)（localhost3000/first）

導(dǎo)航組件

用于指定導(dǎo)航鏈接, 最終Link會(huì)編譯成a標(biāo)簽

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

路由規(guī)則定義組件

Route：

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

各組件關(guān)系示意圖

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

引入路由相關(guān)組件 路由模式組件，告訴當(dāng)前項(xiàng)目，我們要使用的路由模式

HashRouter, hash路由模式

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

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

匹配默認(rèn)為模糊匹配，而且它還會(huì)一直匹配到?jīng)]有規(guī)則組件為止

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

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

嚴(yán)格匹配:exact

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

Link 導(dǎo)航組件，它編譯生成后的html標(biāo)簽只能是 a

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

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

匹配規(guī)則，默認(rèn)為模糊匹配

嚴(yán)格匹配:exact

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

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

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

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

并且以上的路由沒有一個(gè)匹配成功的，則用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’) 編程式到行

如果你想用對(duì)于匹配渲染成功后的組件使用編程式導(dǎo)航，你默認(rèn)情況下，你只能在規(guī)則匹配成功后的組件本身中使用，它的子組件都不行。父組件也不行。

??路由動(dòng)態(tài)參數(shù)：

必須先聲明再使用：

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

如何在頁面上獲取路由參數(shù)：

打印組件的this.props

獲取動(dòng)態(tài)路由參數(shù)

this.props.match.params.uid

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

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

或者生成工具轉(zhuǎn)變?yōu)閷?duì)象：

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

到此這篇關(guān)于React前端路由應(yīng)用介紹的文章就介紹到這了,更多相關(guān)React路由內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論