React前端路由應用介紹
瀏覽器端的前端路由模式:hash模式,history模式
安裝路由模塊
路由模塊不是react自帶模塊,需要安裝第3方模塊
// react-router-dom 它現(xiàn)在最新的版本6
npm i -S react-router-dom@5react-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中的useImperativeHandle()和forwardRef()用法
這篇文章主要介紹了react中的useImperativeHandle()和forwardRef()用法,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08React的createElement和render手寫實現(xiàn)示例
這篇文章主要為大家介紹了React的createElement和render手寫實現(xiàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-08-08解決React報錯JSX?element?type?does?not?have?any?construct
這篇文章主要為大家介紹了解決React報錯JSX?element?type?does?not?have?any?construct?or?call?signatures,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-12-12