React路由渲染方式與withRouter高階組件及自定義導(dǎo)航組件應(yīng)用詳細(xì)介紹
1. 路由的三種渲染方式
1.1 component渲染方式
描述:
這種渲染方式有兩種,一種是類方式渲染,一種是函數(shù)方式渲染。
語法:
<Route path="/home" component={Home} /> 或 <Route path="/home" component={(router)=><Home {…router} />} />
使用:
import React, { Component } from 'react' import { Route } from 'react-router-dom' // 匹配成功后渲染的組件 import RenderCmp from './views/Render' class App extends Component { render() { return ( <div> {/* component 類方式: 1.對于規(guī)則匹配成的組件沒有辦法去寫邏輯,會直接渲染 2.規(guī)則匹配成功后,會給組件中的props自動映射對應(yīng)的路由對象 3.當(dāng)前載體中的state更新,它不會重新創(chuàng)建 */} <Route path="/" component={RenderCmp} /> {/* component 函數(shù)方式: 1.可以在規(guī)則匹配成功后,進(jìn)行業(yè)務(wù)邏輯的判斷來決定最終是否渲染 2.規(guī)則匹配成功后,它需要你把回調(diào)函數(shù)中的路由對象,手動的通過props傳給要渲染的組件 3.當(dāng)前的載體中的state如果,發(fā)生改變,則它對應(yīng)匹配要渲染的組件會銷毀并重新創(chuàng)建 建議: component屬性的回調(diào)函數(shù)的方式,不要在工作中使用,可以用 render來代替 */} {/* <Route path="/" component={route => { if (true) { return <RenderCmp {...route} /> } return <div>沒有權(quán)限</div> }} /> */} </div> ) } } export default App
1.2 render方式渲染
語法:
<Route path="/home" render={<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->router=><Home {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->…router} />} />
使用:
import React, { Component } from 'react' import { Route } from 'react-router-dom' // 匹配成功后渲染的組件 import RenderCmp from './views/Render' class App extends Component { render() { return ( <div> {/* render渲染方式 它有component類的優(yōu)點(diǎn)也有component回調(diào)的優(yōu)點(diǎn),但沒有component回調(diào)中的缺點(diǎn) */} <Route path="/" render={route => { if (true) { return <RenderCmp {...route} /> } return <div>沒有權(quán)限</div> }} /> </div> ) } } export default App
1.3 案例-登錄成功才能訪問某個頁面
定義路由規(guī)則:
import React, { Component } from 'react' import { Redirect, Route, Switch } from 'react-router-dom' // 匹配成功后渲染的組件 import RenderCmp from './views/Render' import Login from './views/Login' class App extends Component { render() { return ( <div> <Switch> <Route path="/login" component={Login} /> <Route path="/render" render={route => { if (sessionStorage.getItem('uid')) { return <RenderCmp {...route} /> } return <Redirect to="/login" /> }} /> </Switch> </div> ) } } export default App
登錄頁面:
import React, { Component } from 'react' class Login extends Component { render() { return ( <div> <h3>用戶登錄</h3> <button onClick={() => { sessionStorage.setItem('uid', 1) this.props.history.push('/render') }} > 登錄一下 </button> </div> ) } } export default Login
1.4 children方式渲染
描述:
在組件渲染顯示時(shí),不是關(guān)注與它是否顯示,而是在顯示的時(shí)候關(guān)注于它的路由相關(guān)信息,才用到它。
語法:
// 全匹配 <Route path="/about" children={router =>{ return <div>children渲染</div> }} /> 或 // 精確匹配 <Route path="/about" children={<About />} />
使用:
import React, { Component } from 'react' import { Redirect, Route, Switch } from 'react-router-dom' // 匹配成功后渲染的組件 import RenderCmp from './views/Render' // import Login from './views/Login' class App extends Component { render() { return ( <div> {/* children屬性中傳入jsx元素,則它會根據(jù)path路徑來匹配規(guī)則,如果匹配成功則渲染,不會自動注入路由對象到props中 */} {/* <Route path="/sdfsf" children={<RenderCmp />} /> */} {/* children屬性為一個函數(shù),則它的渲染不會根據(jù)路由規(guī)則來匹配渲染,它默認(rèn)都會渲染出來 在此函數(shù)的形參中有一個路由對象,此對象中有一個match屬性,如果當(dāng)前訪問的地址和path路徑一致,則返回為對象,否則為null 函數(shù)方式: 如果你當(dāng)前的頁面中有一些顯示的元素它在任何的地址中都要顯示,且還要根據(jù)是否是激活路由,而高亮出來,就可以用它 */} <Route path="/home" children={route => { // console.log('match', route.match) // return <RenderCmp {...route} /> // 手動添加規(guī)則:路徑一致才渲染 return route.match ? <RenderCmp {...route} /> : null }} /> </div> ) } } export default App
2. withRouter高階組件
描述:
作用:把不是通過路由直接渲染出來的組件,將react-router 的 history、location、match 三個對象傳入props對象上
默認(rèn)情況下必須是經(jīng)過路由匹配渲染的組件才存在this.props,才擁有路由參數(shù),才能使用編程式導(dǎo)航的寫法,執(zhí)行this.props.history.push(‘/uri’)跳轉(zhuǎn)到對應(yīng)路由的頁面,然而不是所有組件都直接與路由相連的,當(dāng)這些組件需要路由參數(shù)時(shí),使用withRouter就可以給此組件傳入路由參數(shù),此時(shí)就可以使用this.props
語法:
// 引入withRouter import { withRouter} from 'react-router-dom' // 執(zhí)行一下withRouter export default withRouter(Cmp)
使用:
利用 withRouter 監(jiān)聽路由規(guī)則變化:
import React, { Component } from 'react' // withRouter 讓非路由直接匹配渲染的組件中能得在this.props中得到路由對象 import { Redirect, Route, Switch, withRouter } from 'react-router-dom' // 匹配成功后渲染的組件 // import RenderCmp from './views/Render' import Home from './views/Home' import Detail from './views/Detail' // 裝飾器寫法 // @withRouter class App extends Component { state = { num: 100 } componentDidMount() { // 手動讓第1次執(zhí)行 this.listenerRouter(this.props.location) // 監(jiān)聽路由變化則觸發(fā) 第1次它只注冊,不執(zhí)行回調(diào) this.props.history.listen(this.listenerRouter) } listenerRouter = ({ pathname }) => { console.log('listener', pathname) // 只有登錄直接訪問,別的都要判斷是否登錄 if(pathname!=='/login'){ // 判斷是否登錄 // if(xxx) // this.props.history.replace('/login') return; } } render() { // console.log('app', this.props) return ( <div> <Switch> <Route path="/home" component={Home} /> <Route path="/detail" component={Detail} /> </Switch> </div> ) } } // 對應(yīng)裝飾器寫法 // export default App export default withRouter(App)
3. 自定義導(dǎo)航組件
App.jsx:
import React, { Component } from 'react' import Mylink from './components/Mylink' import { Route, Switch } from 'react-router-dom' import Home from './views/Home' import About from './views/About' class App extends Component { render() { return ( <div className="app"> <Mylink tag="h3" to="/home"> home頁面 </Mylink> <Mylink tag="h3" to="/about"> about頁面 </Mylink> <hr /> {/* 路由規(guī)則 */} <Switch> <Route path="/home" component={Home} /> <Route path="/about" component={About} /> </Switch> </div> ) } } export default App
自定義導(dǎo)航組件:
// Fragment 它可以當(dāng)作頂層元素來包裹子元素,但它不會編譯成html元素 // Fragment 有簡寫,簡寫時(shí),可以不需要導(dǎo)入Fragment組件 <></> // import React, { Component, Fragment } from 'react' import React, { Component } from 'react' import { withRouter, Route } from 'react-router-dom' import types from 'prop-types' @withRouter class Mylink extends Component { jumpUrl = () => { this.props.history.push(this.props.to) } render() { let { tag: Tag, children, to, activeClassName } = this.props return ( <> <Route path={to} children={({ match }) => { // 高亮 let className = match ? activeClassName : '' return ( <Tag className={className} onClick={this.jumpUrl}> {children} </Tag> ) }} /> </> ) } } // 字段限制 Mylink.propTypes = { to: types.string.isRequired, tag: types.string, activeClassName: types.string } // 默認(rèn)值 Mylink.defaultProps = { tag: 'a', activeClassName: 'active' } export default Mylink
到此這篇關(guān)于React路由渲染方式與withRouter高階組件及自定義導(dǎo)航組件應(yīng)用詳細(xì)介紹的文章就介紹到這了,更多相關(guān)React路由渲染方式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
React Native全面屏狀態(tài)欄和底部導(dǎo)航欄適配教程詳細(xì)講解
最近在寫 React Native 項(xiàng)目,調(diào)試應(yīng)用時(shí)發(fā)現(xiàn)頂部狀態(tài)欄和底部全面屏手勢指示條區(qū)域不是透明的,看起來很難受。研究了一下這個問題,現(xiàn)在總結(jié)一下解決方案,這篇文章主要介紹了React Native全面屏狀態(tài)欄和底部導(dǎo)航欄適配教程2023-01-01React Antd中如何設(shè)置表單只輸入數(shù)字
這篇文章主要介紹了React Antd中如何設(shè)置表單只輸入數(shù)字問題,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-06-06react-dnd實(shí)現(xiàn)任意拖動與互換位置
這篇文章主要為大家詳細(xì)介紹了react-dnd實(shí)現(xiàn)任意拖動與互換位置,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08詳解React Native 采用Fetch方式發(fā)送跨域POST請求
這篇文章主要介紹了詳解React Native 采用Fetch方式發(fā)送跨域POST請求,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-11-11React之如何在Suspense中優(yōu)雅地請求數(shù)據(jù)
Suspense 是 React 中的一個組件,直譯過來有懸掛的意思,能夠?qū)⑵浒漠惒浇M件掛起,直到組件加載完成后再渲染,本文詳細(xì)介紹了如何在Suspense中請求數(shù)據(jù),感興趣的小伙伴可以參考閱讀本文2023-04-04使用react-activation實(shí)現(xiàn)keepAlive支持返回傳參
本文主要介紹了使用react-activation實(shí)現(xiàn)keepAlive支持返回傳參,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05