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ī)則匹配成功后，它需要你把回調(diào)函數(shù)中的路由對象，手動的通過props傳給要渲染的組件
          3.當前的載體中的state如果,發(fā)生改變,則它對應匹配要渲染的組件會銷毀并重新創(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)點也有component回調(diào)的優(yōu)點,但沒有component回調(diào)中的缺點
        */}
        <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方式渲染

描述：

在組件渲染顯示時，不是關(guān)注與它是否顯示，而是在顯示的時候關(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ī)則來匹配渲染,它默認都會渲染出來
          在此函數(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’)跳轉(zhuǎn)到對應路由的頁面，然而不是所有組件都直接與路由相連的，當這些組件需要路由參數(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í)行回調(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>
    )
  }
}
// 對應裝飾器寫法
// 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