SPA 單頁面應用APP: 更改地址欄資訊更改組件
1、history庫的使用
知識點1：地址欄的歷史記錄是堆疊的形式，每一次頁面的跳轉都會壓入一條歷史記錄
history 的基本使用
<body>
<a href="http://www.atguigu.com" onclick="return push('/test1') ">push test1</a><br><br>
<button onClick="push('/test2')">push test2</button><br><br>
<button onClick="replace('/test3')">replace test3</button><br><br>
<button onClick="back()"><= 回退</button>
<button onClick="forword()">前進 =></button>
<script type="text/javascript" src="https://cdn.bootcss.com/history/4.7.2/history.js"></script>
<script type="text/javascript">
<!-- 方法一，直接使用H5推出的history身上的API let history = History.createBrowserHistory() -->
<!-- 方法二，hash值（錨點）-->
let history = History.createHashHistory()
<!--向堆疊里面添加一條記錄-->
function push (path) {
history.push(path)
return false
}
<!--替代最新的一條歷史記錄-->
function replace (path) {
history.replace(path)
}
<!--反回上一條記錄-->
function back() {
history.goBack()
}
<!--回傳嚇一條記錄-->
function forword() {
history.goForward()
}
<!--添加路徑的監聽-->
history.listen((location) => {
console.log('請求路由路徑變化了', location)
})
</script>
</body>
2、react官方的庫 yarn add react-router-dom
內置庫的引入： import {Route,NavLink} from react-router-dom
注釋：Route,NavLink 是 react-router-dom 封裝的組件所以首字母大寫，
1. 撰寫路由（App組建中使用）：
撰寫路由對應的 DOM 是頁面上的 導航欄
原生html中，靠跳轉不同的頁面
<a className="list-group-item" href="./about.html">About</a>
<a className="list-group-item active" href="./home.html">Home</a>
在React中靠路由鏈接實作切換組件–撰寫路由鏈接
注：Link ===》 NavLInk 是因為 Navlink 標簽在使用 bootstraps 時獲去焦點是會自動添加一個 active 的類名，可以喂焦點DOM添加樣式
<NavLink activeClassName="atguigu" className="list-group-item" to="/about">About</NavLink>
<NavLink activeClassName="atguigu" className="list-group-item" to="/home">Home</NavLink>
2. 注冊路由（App組建中使用）：
注冊路由對應的 DOM 是頁面上的展示欄
<Route path="/about" component={About}/>
<Route path="/home" component={Home}/>
3. 小知識點：
a、在入口檔案中需要包含路由組件的一般組件包裹一層 <包含路由組件的一般組件 />
想要使用注冊、撰寫路由組件必須在所有的路由組件的注冊、撰寫包裹在同一個 標簽里面
import {BrowserRouter} from 'react-router-dom'
//引入App
import App from './App'
ReactDOM.render(
<BrowserRouter>
<App/>
</BrowserRouter>,
document.getElementById('root')
)
b、路由組件放在和src下的 pages 檔案夾中
一般組件放在 components 檔案夾中
c、路由組建中那怕不傳資料他的 pros 中還是能接受到資料
history || location || match
一般組件不傳遞資料他的 peops 是接受不到資料的
4. MyNavLink 的封裝
MyNavLink 的使用 （App組建中使用）
<!--在React中靠路由鏈接實作切換組件--撰寫路由鏈接-->
<MyNavLink to="/about" a=1 b=2 c=3 >About</MyNavLink>
<MyNavLink to="/home" a=22 b=33 c=44 >Home</MyNavLink>
MyNavLink 的封裝
import React, { Component } from 'react'
import {NavLink} from 'react-router-dom'
export default class MyNavLink extends Component {
render() {
return (
<NavLink activeClassName="atguigu" className="list-group-item" {...this.props}/>
<!--吧路由組件獨有的屬性傳遞過來渲染到 NAVLink 組件中，-->
<!--標簽體內容通過 childen=標簽體內容 傳遞進來-->
)
}
}
注釋：路由組件相同的類屬行可以放在 MyNavLink 組件中，使用撰寫路由組件的時候只需要傳遞過來去獨有的類名和資料
About 路由組件的 this.props ======> { to="/about"，a=1，b=2，c=3，childen="About" }
Home 路由組件的 this.props ======> { to="/home"，a=22，b=33，c=44，childen="Home" }
< MyNavLink to="/about" > About < /MyNavLink > 其中的 About 標簽體 是一個標簽屬性： childen=“About”
在傳遞屬性的時候可以直接寫在 MyNavLink 標簽內通過 pros 傳遞到 MyNavLink 組件中，對 NavLink 組件進行封裝，
<!--使用路由組件的組件-->
<MyNavLink to="/home/message">Message</MyNavLink>
<!--NavLink 組件中對 NavLink 組件進行封裝-->
<NavLink activeClassName="atguigu" className="list-group-item" {...this.props}/>
5、swith 的使用
注釋：找到第一個符合條件的路由組件后就不再繼續往下繼續查找路由組建
{/* 注冊路由 */}
<Switch>
<Route path="/about" component={About}/>
<Route path="/home" component={Home}/>
<Route path="/home" component={Test}/>
</Switch>
//地址欄訪問 /about 或者 /home 時：
//注冊路由只會渲染初 About 和 Home 路由組件 Test 路由組建不會唄查找到
//如果不加上 switch 標簽就 Test 路由組件也會被渲染到頁面上
6. bootstraps 的樣式錯誤
解決方法
-
引入 bootstraps.css 時，把 ./css/… ====> /css/…
-
引入 bootstraps.css 時，把 ./css/… ====> %PUBLIC_URL%/css/…
-
在入口檔案中，不使用 BrowserRouter 標簽包裹包含路由組件的組件 ====> HashRouter 標簽包裹該組件
7.精準匹配 和 模糊匹配
注冊路由的 path = “/home” ====== > 撰寫路由中給出 to = “/home/a/b” 就能匹配上 可以渲染組件
注冊路由的 path = “/home/a/b/c” ====== > 撰寫路由中給出 to = “/home” 則不能匹配上 無法渲染組件
撰寫路由（導航欄）中 【輸入的路徑】 包含注冊路由（展示欄）中 【匹配的路徑】 且 順序一致 就能匹配上
注冊路由時添加 exact={true} 或者 exact 開啟嚴格模式則必須撰寫路由時和注冊路由時的路徑完全一樣才能匹配的上，
嚴格匹配不能隨便開啟，需要的時候在開啟，有些時候會導致無法繼續匹配二級路由
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/264500.html
標籤：其他