React中的路由嵌套和手動(dòng)實(shí)現(xiàn)路由跳轉(zhuǎn)的方式詳解

更新時(shí)間：2022年11月03日 11:07:34 作者：藍(lán)桉cyq

這篇文章主要介紹了React中的路由嵌套和手動(dòng)實(shí)現(xiàn)路由跳轉(zhuǎn)的方式,手動(dòng)路由的跳轉(zhuǎn)，主要是通過(guò)Link或者NavLink進(jìn)行跳轉(zhuǎn)的，實(shí)際上我們也可以通JavaScript代碼進(jìn)行跳轉(zhuǎn)，需要的朋友可以參考下

React的路由嵌套

接上一篇文章, 在上一篇文章中講解了路由的基本介紹, 我再來(lái)介紹一下路由的其他用法

在開(kāi)發(fā)中，路由之間是存在嵌套關(guān)系的。

這里我們假設(shè)Home頁(yè)面中還有兩個(gè)頁(yè)面內(nèi)容:

推薦列表和排行榜列表;

點(diǎn)擊不同的鏈接可以跳轉(zhuǎn)到不同的地方，顯示不同的內(nèi)容;

<Routes>
  <Route path='/' element={<Navigate to="/home"/>}></Route>
  
  {/* 配置二級(jí)路由 */}
  <Route path='/home' element={<Home/>}>
    <Route path='/home' element={<Navigate to="/home/recommend"/>}/>
    <Route path='/home/recommend' element={<HomeRecommend/>}/>
    <Route path='/home/ranking' element={<HomeRanking/>}/>
  </Route>
  
  <Route path='/about' element={<About/>}/>
  <Route path='/profile' element={<Profile/>}/>
  <Route path='*' element={<Notfound/>}/>
</Routes>

<Outlet>組件用于在父路由元素中作為子路由的占位元素, 也就是子路由的展示位置(必須寫(xiě))。

// home組件

import { Link, Outlet } from 'react-router-dom'

export class Home extends PureComponent {
  render() {
    return (
      <div>
        <h2>Home</h2>
        <Link to="/home/recommend">推薦</Link>
        <Link to="/home/ranking">排行</Link>
        <Outlet/>
      </div>
    )
  }
}

手動(dòng)路由的跳轉(zhuǎn)

目前我們實(shí)現(xiàn)的跳轉(zhuǎn)主要是通過(guò)Link或者NavLink進(jìn)行跳轉(zhuǎn)的，實(shí)際上我們也可以通JavaScript代碼進(jìn)行跳轉(zhuǎn)。

Link或者NavLink渲染出來(lái)是一個(gè)a元素, 如果我們想點(diǎn)擊一個(gè)button或者其他元素實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn), 就需要通過(guò)JavaScript代碼進(jìn)行跳轉(zhuǎn)了

我們知道Navigate組件是可以進(jìn)行路由的跳轉(zhuǎn)的，但是依然是組件的方式。

如果我們希望通過(guò)JavaScript代碼邏輯進(jìn)行跳轉(zhuǎn)(比如點(diǎn)擊了一個(gè)button)，那么就需要獲取到navigate對(duì)象。

在Router6.x版本之后，代碼類的API都遷移到了hooks的寫(xiě)法:

如果我們希望進(jìn)行代碼跳轉(zhuǎn)，需要通過(guò)useNavigate的Hook獲取到navigate對(duì)象進(jìn)行操作, hook只能在函數(shù)組件中使用(這里了解一下, 后面文章會(huì)有專門(mén)詳細(xì)講解hook的);

那么如果是一個(gè)函數(shù)式組件，我們可以直接調(diào)用它提供的hooks的寫(xiě)法，但是如果是一個(gè)類組件呢?

Router6.x確實(shí)是沒(méi)有提供類組件的API, 如果我們確實(shí)想要在類組件中使用, 需要再使用高階組件對(duì)類組件進(jìn)行增強(qiáng)(通過(guò)高階組件增強(qiáng)向類組件中傳入navigate)
如果是Router5.x, 是有提供withRouter這樣一個(gè)高階組件的, 但是Router6.x中, 我們需要自己實(shí)現(xiàn)這樣的高階組件
封裝高階函數(shù)方法如下, 由于其他地方也可能使用高階組件, 所以我是在一個(gè)單獨(dú)的文件中進(jìn)行封裝

import { useNavigate } from "react-router-dom"

// 封裝高階組件
export default function withRouter(WrapperComponent) {
  return function(props) {
    // 在函數(shù)組件中通過(guò)hook拿到navigate對(duì)象
    const naviagte = useNavigate()
    // 將獲取到的navigate放到一個(gè)對(duì)象中
    const router = {naviagte}

    return <WrapperComponent {...props} router={router} />
  }
}

這樣我們引入自己封裝的高階組件, 通過(guò)高階組件的增強(qiáng), 就可以在類組件的props中獲取到navigate

export class App extends PureComponent {
  navigateTo(path) {
    // 經(jīng)過(guò)高階組件增強(qiáng)的組件中, 可以在props中拿到navigate
    const { naviagte } = this.props.router
    // 調(diào)用navigate
    naviagte(path)
  }

  render() {
    return (
      <div className='app'>
        <div className='header'>
          <Link to="/home">首頁(yè)</Link>
          <Link to="/about">關(guān)于</Link>
          <Link to="/profile">我的</Link>

          {/* 發(fā)生點(diǎn)擊事件時(shí), 將路勁傳遞過(guò)去 */}
          <button onClick={() => this.navigateTo("/category")}>分類</button>
          <span onClick={() => this.navigateTo("/order")}>訂單</span>
        </div>

        <div className='counter'>
          <Routes>
            {/* 當(dāng)默認(rèn)路徑 / 時(shí), 重定向到home頁(yè)面 */}
            <Route path='/' element={<Navigate to="/home"/>}></Route>
            {/* 配置二級(jí)路由 */}
            <Route path='/home' element={<Home/>}>
              <Route path='/home' element={<Navigate to="/home/recommend"/>}/>
              <Route path='/home/recommend' element={<HomeRecommend/>}/>
              <Route path='home/ranking' element={<HomeRanking/>}/>
            </Route>
            <Route path='/about' element={<About/>}/>
            <Route path='/profile' element={<Profile/>}/>
            <Route path='/category' element={<Category/>}/>
            <Route path='/order' element={<Order/>}/>
            {/* 當(dāng)上面路徑都沒(méi)有匹配到時(shí), 顯式Notfound組件 */}
            <Route path='*' element={<Notfound/>}/>
          </Routes>
        </div>

        <div className='footer'>footer</div>
      </div>
    )
  }
}

// 使用高階組件對(duì)App組件進(jìn)行增強(qiáng)
export default withRouter(App)

到此這篇關(guān)于React中的路由嵌套和手動(dòng)實(shí)現(xiàn)路由跳轉(zhuǎn)的方式的文章就介紹到這了,更多相關(guān)react路由嵌套和路由跳轉(zhuǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: