React路由參數(shù)改變頁(yè)面不刷新數(shù)據(jù)的情況

路由的參數(shù)由于是在componentDidMount中獲取的，如果在詳情頁(yè)面再次打開(kāi)詳情頁(yè)面，由于組件并沒(méi)有重新渲染，導(dǎo)致didMount不會(huì)獲取路由參數(shù)。

因此在參數(shù)改變的時(shí)候，可以利用componentWillReceiveProps來(lái)更新變量。

// 獲取路由參數(shù)
  componentDidMount() {
    const didMountId = this.props.location.query.id;
    this.setState({ id: didMountId }, () => {
      this.props.pageList({ id: this.state.id }); // 請(qǐng)求接口獲取數(shù)據(jù)
    });
  }
//組件更新時(shí)被調(diào)用 
  componentWillReceiveProps(newProps) {
    if (newProps.location.query.id !== this.state.id) {
      this.setState({ id: newProps.location.query.id},  () => {
        this.props.pageList({ id: this.state.id});  //當(dāng)路由參數(shù)改變時(shí)，重新請(qǐng)求接口獲取數(shù)據(jù)
      });
    }
  }

React頁(yè)面路由

前端路由和后端路由

在web開(kāi)發(fā)早期的年代里，前端的功能遠(yuǎn)不如現(xiàn)在這么強(qiáng)大，一直是后端路由占據(jù)主導(dǎo)地位。服務(wù)端渲染就是在瀏覽器請(qǐng)求頁(yè)面URL時(shí)，（每次切換頁(yè)面時(shí)，瀏覽器都會(huì)刷新頁(yè)面）服務(wù)端按照不同的URL地址與不同的html + css + 后端數(shù)據(jù) 之間的映射，直接將我們需要的HTML文本組裝好，并返回給瀏覽器，這個(gè)HTML文本被瀏覽器解析之后，不需要經(jīng)過(guò)JavaScript腳本的執(zhí)行，可直接構(gòu)建出完整的DOM樹(shù)并展示頁(yè)面中。

前端路由介紹

隨著 ajax 的使用越來(lái)越廣泛，前端的頁(yè)面邏輯開(kāi)始變得越來(lái)越復(fù)雜，特別是單頁(yè)Web應(yīng)用(Single Page Web Application,SPA))的興起，前端路由系統(tǒng)隨之開(kāi)始流行。

1、用戶的角度

前端路由主要實(shí)現(xiàn)了兩個(gè)功能（使用ajax更新頁(yè)面狀態(tài)的情況下）：

記錄當(dāng)前頁(yè)面的狀態(tài)（保存或分享當(dāng)前頁(yè)的url，再次打開(kāi)該url時(shí)，網(wǎng)頁(yè)還是保存（分享）時(shí)的狀態(tài)）；

可以使用瀏覽器的前進(jìn)后退功能（如點(diǎn)擊后退按鈕，可以使頁(yè)面回到使用ajax更新頁(yè)面之前的狀態(tài)，url也回到之前的狀態(tài)）；

2、作為開(kāi)發(fā)者

要實(shí)現(xiàn)這兩個(gè)功能，我們需要做到：

改變url且不讓瀏覽器向服務(wù)器發(fā)出請(qǐng)求；

監(jiān)測(cè) url 的變化；

截獲 url 地址，并解析出需要的信息來(lái)匹配路由規(guī)則。

匹配模式

模糊匹配模式

• 默認(rèn)情況下, React路由是模糊匹配模式
• 模糊匹配規(guī)則：只要pathname以path開(kāi)頭就會(huì)匹配成功，對(duì)應(yīng)的組件就會(huì)被渲染出來(lái)。

精確匹配

• 給 Route組件添加exact屬性，讓其變?yōu)榫_匹配模式
• 精確匹配：只有當(dāng)path和 pathname完全匹配時(shí)才會(huì)展示該路由，嚴(yán)格匹配不要隨便開(kāi)啟，需要再開(kāi)，有些時(shí)候開(kāi)啟會(huì)導(dǎo)致無(wú)法繼續(xù)匹配二級(jí)路由。

路由的執(zhí)行過(guò)程

• 點(diǎn)擊Link組件(a標(biāo)簽）會(huì)修改瀏覽器地址欄中的url
• React路由監(jiān)聽(tīng)到地址欄url的變化。
• Reat路由內(nèi)部遍歷所有 Route組件，使用路由規(guī)則(path)與 pathname進(jìn)行匹配。
• 當(dāng)路由規(guī)則(path)能夠匹配地址欄中的pathname時(shí)，就展示渲染該 Route組件的內(nèi)容

hash模式

這里的 hash 就是指 url 尾巴后的 # 號(hào)以及后面的字符。這里的 # 和 css 里的 # 是一個(gè)意思。hash也稱作錨點(diǎn)，本身是用來(lái)做頁(yè)面定位的，她可以使對(duì)應(yīng) id 的元素顯示在可視區(qū)域內(nèi)。

由于 hash 值變化不會(huì)導(dǎo)致瀏覽器向服務(wù)器發(fā)出請(qǐng)求，而且 hash 改變會(huì)觸發(fā) hashchange 事件，瀏覽器的進(jìn)后退也能對(duì)其進(jìn)行控制，所以人們?cè)?html5 的 history 出現(xiàn)前，基本都是使用 hash 來(lái)實(shí)現(xiàn)前端路由的。

window.location.hash = 'qq' // 設(shè)置 url 的 hash，會(huì)在當(dāng)前url后加上 '#qq'
var hash = window.location.hash // '#qq'
window.addEventListener('hashchange', function(){
? ? // 監(jiān)聽(tīng)hash變化，點(diǎn)擊瀏覽器的前進(jìn)后退會(huì)觸發(fā)
})

history模式

已經(jīng)有 hash 模式了，而且 hash 能兼容到IE8， history 只能兼容到 IE10，為什么還要搞個(gè) history 呢？

首先，hash 本來(lái)是拿來(lái)做頁(yè)面定位的，如果拿來(lái)做路由的話，原來(lái)的錨點(diǎn)功能就不能用了。

其次，hash 的傳參是基于 url的，如果要傳遞復(fù)雜的數(shù)據(jù)，會(huì)有體積的限制，而history 模式不僅可以在url里放參數(shù)，還可以將數(shù)據(jù)存放在一個(gè)特定的對(duì)象中。

? ?window.history.pushState(state, title, url)
// state：需要保存的數(shù)據(jù)，這個(gè)數(shù)據(jù)在觸發(fā)popstate事件時(shí)，可以在event.state里獲取
// title：標(biāo)題，基本沒(méi)用，一般傳 null
// url：設(shè)定新的歷史記錄的 url。新的 url 與當(dāng)前 url 的 origin 必須是一樣的，否則會(huì)拋出錯(cuò)誤。url可以是絕對(duì)路徑，也可以是相對(duì)路徑。

window.history.replaceState(state, title, url)
// 與 pushState 基本相同，但她是修改當(dāng)前歷史記錄，而 pushState 是創(chuàng)建新的歷史記錄
window.addEventListener("popstate", function() {
? ? // 監(jiān)聽(tīng)瀏覽器前進(jìn)后退事件，pushState 與 replaceState 方法不會(huì)觸發(fā)
});
window.history.back() // 后退
window.history.forward() // 前進(jìn)
window.history.go(1) // 前進(jìn)一步，-2為后退兩步，window.history.length可以查看當(dāng)前歷史堆棧中頁(yè)面的數(shù)量

react-router-dom API

React實(shí)現(xiàn)頁(yè)面路由的模塊：react-router-dom

1、HashRouter和BrowserRouter

其實(shí)就是路由的hash和history兩種模式，并且這兩個(gè)組件是路由的容器，必須在最外層。

// hash模式
ReactDOM.render(
?? ? <HashRouter>
? ? ? ?? ?<Route path="/" component={Home}/>
</HashRouter>
)

// history模式
ReactDOM.render(
?? ? ? <BrowserRouter>
? ? ? ?? ? <Route path="/" component={Home} />
? ? ? </BrowserRouter>
)

2、Route

路由的一個(gè)原材料，它是控制路徑對(duì)應(yīng)顯示的組件。 Route的參數(shù)：

• path：跳轉(zhuǎn)的路徑
• component： 對(duì)應(yīng)路徑顯示的組件
• render：可以自己寫render函數(shù)返回具體的dom，而不需要去設(shè)置component。
• location： 傳遞route對(duì)象，和當(dāng)前的route對(duì)象對(duì)比，如果匹配則跳轉(zhuǎn)
• exact： 匹配規(guī)則，true的時(shí)候則精確匹配。

3、Link和NavLink

(1)Link的api

to： 有兩種寫法，表示跳轉(zhuǎn)到哪個(gè)路由

字符串寫法

<Link to="/a" ? />

對(duì)象寫法

? <Link to={{
? pathname: '/courses',
? search: '?sort=name',
? hash: '#the-hash',
? state: { fromDashboard: true }
}}/>

• replace：就是將push改成replace
• innerRef：訪問(wèn)Link標(biāo)簽的dom

(2) NavLink的api

• Link的所有api
• activeClassName 路由激活的時(shí)候設(shè)置的類名
• activeStyle 路由激活設(shè)置的樣式
• exact 參考Route，符合這個(gè)條件才會(huì)激活active類
• strict 參考Route，符合這個(gè)條件才會(huì)激活active類
• isActive 接收一個(gè)回調(diào)函數(shù)，active狀態(tài)變化的時(shí)候回觸發(fā)，返回false則中斷跳轉(zhuǎn)。

const oddEvent = (match, location) => {
? console.log(match,location)
? if (!match) {
? ? return false
? }
? console.log(match.id)
? return true
}
<NavLink isActive={oddEvent} to="/a/123">組件一</NavLink>

• location 接收一個(gè)location對(duì)象，當(dāng)url滿足這個(gè)對(duì)象的條件才會(huì)跳轉(zhuǎn)。

<NavLink to="/a/123" location={{ key:"mb5wu3", pathname:"/a/123" }}/>

4、Redirect：頁(yè)面重定向

// 基本的重定向
<Redirect to="/somewhere/else" />
// 對(duì)象形式
<Redirect
? to={{
? ? pathname: "/login",
? ? search: "?utm=your+face",
? ? state: { referrer: currentLocation }
? }}
/>
// 采用push生成新的記錄
<Redirect push to="/somewhere/else" />
// 配合Switch組件使用，form表示重定向之前的路徑，如果匹配則重定向，不匹配則不重定向
<Switch>
? <Redirect from='/old-path' to='/new-path'/>
? <Route path='/new-path' component={Place}/>
</Switch>

5、Switch

路由切換，只會(huì)匹配第一個(gè)路由，可以想象成tab欄

Switch內(nèi)部只能包含Route、Redirect、Router

?<Switch>
? <Route exact path="/" component={Home}/>
? <Route path="/about" component={About}/>
? <Route path="/:user" component={User}/>
? <Route component={NoMatch}/>
</Switch>

6、Router Hooks

在Router5.x中新增加了Router Hooks用于在函數(shù)組件中獲取路由信息。使用規(guī)則和React的其他Hooks一致。

• useHistory：返回history對(duì)象
• useLocation：返回location對(duì)象
• useRouteMatch：返回match對(duì)象
• useParams：返回match對(duì)象中的params，也就是path傳遞的參數(shù)

? ?import React from ‘react';
? ? import { useHistory } from ‘react-router-dom';
?function backBtn(props) {
? ? ? ? let ?history = useHistory;
? ? ? ? return <button onClick={ ()=> {
? ? ? ? ? ? ? history.goBack();
}>返回上一頁(yè)</button>
? ? ? ?}

7、history對(duì)象

在每個(gè)路由組件中我們可以使用this.props.history獲取到history對(duì)象，也可以使用withRouter包裹組件獲取，在history中封裝了push，replace，go等方法，具體內(nèi)容如下：

History {
? ? length: number;
? ? action: Action;
? ? location: Location;
? ? push(path: Path, state?: LocationState): void; // 調(diào)用push前進(jìn)到一個(gè)地址,可以接受一個(gè)state對(duì)象，就是自定義的路由數(shù)據(jù)
? ? push(location: LocationDescriptorObject): void; // 接受一個(gè)location的描述對(duì)象
? ? replace(path: Path, state?: LocationState): void; // 用頁(yè)面替換當(dāng)前的路徑，不可再goBack
? ? replace(location: LocationDescriptorObject): void; // 同上
? ? go(n: number): void; // 往前走多少也頁(yè)面
? ? goBack(): void; // 返回一個(gè)頁(yè)面
? ? goForward(): void; // 前進(jìn)一個(gè)頁(yè)面
? ? block(prompt?: boolean | string | TransitionPromptHook): UnregisterCallback;
? ? listen(listener: LocationListener): UnregisterCallback;
? ? createHref(location: LocationDescriptorObject): Href;
}

這樣我們想使用api來(lái)操作前進(jìn)后退就可以調(diào)用history中的方法 

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論