React路由渲染方式與withRouter高階組件及自定義導航組件應用詳細介紹

更新時間：2022年09月28日 15:10:20 作者：月光曬了很涼快

這篇文章主要介紹了React路由三種渲染方式、withRouter高階組件、自定義導航組件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧

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自動映射對應的路由對象
          3.當前載體中的state更新,它不會重新創(chuàng)建
        */}
        <Route path="/" component={RenderCmp} />
        {/* 
          component
          函數(shù)方式：
          1.可以在規(guī)則匹配成功后，進行業(yè)務邏輯的判斷來決定最終是否渲染
          2.規(guī)則匹配成功后，它需要你把回調函數(shù)中的路由對象，手動的通過props傳給要渲染的組件
          3.當前的載體中的state如果,發(fā)生改變,則它對應匹配要渲染的組件會銷毀并重新創(chuàng)建
          建議: component屬性的回調函數(shù)的方式,不要在工作中使用,可以用 render來代替
        */}
        {/* <Route
          path="/"
          component={route => {
            if (true) {
              return <RenderCmp {...route} />
            }
            return <div>沒有權限</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)點也有component回調的優(yōu)點,但沒有component回調中的缺點
        */}
        <Route
          path="/"
          render={route => {
            if (true) {
              return <RenderCmp {...route} />
            }
            return <div>沒有權限</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方式渲染

描述：

在組件渲染顯示時，不是關注與它是否顯示，而是在顯示的時候關注于它的路由相關信息，才用到它。

語法：

// 全匹配
<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ī)則來匹配渲染,它默認都會渲染出來
          在此函數(shù)的形參中有一個路由對象,此對象中有一個match屬性,如果當前訪問的地址和path路徑一致,則返回為對象,否則為null
          函數(shù)方式: 如果你當前的頁面中有一些顯示的元素它在任何的地址中都要顯示,且還要根據(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對象上

默認情況下必須是經(jīng)過路由匹配渲染的組件才存在this.props，才擁有路由參數(shù)，才能使用編程式導航的寫法，執(zhí)行this.props.history.push(‘/uri’)跳轉到對應路由的頁面，然而不是所有組件都直接與路由相連的，當這些組件需要路由參數(shù)時，使用withRouter就可以給此組件傳入路由參數(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í)行回調
    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>
    )
  }
}
// 對應裝飾器寫法
// export default App
export default withRouter(App)

3. 自定義導航組件

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

自定義導航組件：

// Fragment 它可以當作頂層元素來包裹子元素,但它不會編譯成html元素
// Fragment 有簡寫,簡寫時,可以不需要導入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
}
// 默認值
Mylink.defaultProps = {
  tag: 'a',
  activeClassName: 'active'
}
export default Mylink

到此這篇關于React路由渲染方式與withRouter高階組件及自定義導航組件應用詳細介紹的文章就介紹到這了,更多相關React路由渲染方式內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

基于useImperativeHandle的使用解析
這篇文章主要介紹了基于useImperativeHandle的使用解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
React Native全面屏狀態(tài)欄和底部導航欄適配教程詳細講解
最近在寫 React Native 項目，調試應用時發(fā)現(xiàn)頂部狀態(tài)欄和底部全面屏手勢指示條區(qū)域不是透明的，看起來很難受。研究了一下這個問題，現(xiàn)在總結一下解決方案，這篇文章主要介紹了React Native全面屏狀態(tài)欄和底部導航欄適配教程
2023-01-01
react hooks入門詳細教程
這篇文章主要介紹了react hooks入門詳細教程,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-04-04
詳解超簡單的react服務器渲染(ssr)入坑指南
這篇文章主要介紹了詳解超簡單的react服務器渲染(ssr)入坑指南，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-02-02
React Antd中如何設置表單只輸入數(shù)字
這篇文章主要介紹了React Antd中如何設置表單只輸入數(shù)字問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-06-06
react-dnd實現(xiàn)任意拖動與互換位置
這篇文章主要為大家詳細介紹了react-dnd實現(xiàn)任意拖動與互換位置，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-08-08
詳解React Native 采用Fetch方式發(fā)送跨域POST請求
這篇文章主要介紹了詳解React Native 采用Fetch方式發(fā)送跨域POST請求，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-11-11
react 生命周期實例分析
這篇文章主要介紹了react 生命周期,結合實例形式分析了react 生命周期基本原理、操作步驟與注意事項,需要的朋友可以參考下
2020-05-05
React之如何在Suspense中優(yōu)雅地請求數(shù)據(jù)
Suspense 是 React 中的一個組件，直譯過來有懸掛的意思，能夠將其包裹的異步組件掛起，直到組件加載完成后再渲染，本文詳細介紹了如何在Suspense中請求數(shù)據(jù)，感興趣的小伙伴可以參考閱讀本文
2023-04-04
使用react-activation實現(xiàn)keepAlive支持返回傳參
本文主要介紹了使用react-activation實現(xiàn)keepAlive支持返回傳參，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-05-05