亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

React前端路由應用介紹

 更新時間:2022年09月24日 09:03:29   作者:勇敢*牛牛  
前端應用大多數(shù)是SPA(單頁應用程序),也就是只有一個HTML頁面的應用程序。因為它的用戶體驗更好、對服務器壓力更小,所以更受歡迎。為了有效的使用單個頁面來管理多頁面的功能,前端路由應運而生

瀏覽器端的前端路由模式:hash模式,history模式

安裝路由模塊

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

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

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

一些相關(guān)組件

路由模式組件

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

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

導航組件

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

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

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

Route:

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

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

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

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

HashRouter, hash路由模式

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

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

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

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屬性匹配,

匹配規(guī)則,默認為模糊匹配

嚴格匹配:exact

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

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

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

<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’) 編程式到行

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

??路由動態(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

獲取動態(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")
或者生成對象模式:
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)閷ο螅?/p>

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前端路由應用介紹的文章就介紹到這了,更多相關(guān)React路由內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • React 自動聚焦字段使用詳解

    React 自動聚焦字段使用詳解

    這篇文章主要為大家介紹了React 自動聚焦字段使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-07-07
  • react-redux的基本使用

    react-redux的基本使用

    react-redux是redux官方react綁定庫,能夠使react組件從redux store中讀取數(shù)據(jù),并且向store分發(fā)actions以此來更新數(shù)據(jù),這篇文章主要介紹了react-redux使用,需要的朋友可以參考下
    2022-08-08
  • react中的useImperativeHandle()和forwardRef()用法

    react中的useImperativeHandle()和forwardRef()用法

    這篇文章主要介紹了react中的useImperativeHandle()和forwardRef()用法,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • React的createElement和render手寫實現(xiàn)示例

    React的createElement和render手寫實現(xiàn)示例

    這篇文章主要為大家介紹了React的createElement和render手寫實現(xiàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-08-08
  • react?Scheduler?實現(xiàn)示例教程

    react?Scheduler?實現(xiàn)示例教程

    這篇文章主要為大家介紹了react?Scheduler?實現(xiàn)示例教程,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-09-09
  • 基于React.js實現(xiàn)簡單的文字跑馬燈效果

    基于React.js實現(xiàn)簡單的文字跑馬燈效果

    剛好手上有一個要實現(xiàn)文字跑馬燈的react項目,然后ant-design上面沒有這個組件,于是只能自己手擼一個,文中的實現(xiàn)方法講解詳細,希望對大家有所幫助
    2023-01-01
  • 詳解React之key的使用和實踐

    詳解React之key的使用和實踐

    這篇文章主要介紹了詳解React之key的使用和實踐,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • 解決React報錯JSX?element?type?does?not?have?any?construct?or?call?signatures

    解決React報錯JSX?element?type?does?not?have?any?construct

    這篇文章主要為大家介紹了解決React報錯JSX?element?type?does?not?have?any?construct?or?call?signatures,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-12-12
  • 實例講解React 組件生命周期

    實例講解React 組件生命周期

    這篇文章主要介紹了React 組件生命周期的相關(guān)資料,文中示例代碼非常詳細,幫助大家更好的理解和學習,感興趣的朋友可以了解下
    2020-07-07
  • Remix路由模塊輸出對象loader函數(shù)詳解

    Remix路由模塊輸出對象loader函數(shù)詳解

    這篇文章主要為大家介紹了Remix路由模塊輸出對象loader函數(shù)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪<BR>
    2023-04-04

最新評論