React中的路由嵌套和手動實現(xiàn)路由跳轉的方式詳解

更新時間：2022年11月03日 11:07:34 作者：藍桉cyq

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

React的路由嵌套

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

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

這里我們假設Home頁面中還有兩個頁面內容:

推薦列表和排行榜列表;

點擊不同的鏈接可以跳轉到不同的地方，顯示不同的內容;

<Routes>
  <Route path='/' element={<Navigate to="/home"/>}></Route>
  
  {/* 配置二級路由 */}
  <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>組件用于在父路由元素中作為子路由的占位元素, 也就是子路由的展示位置(必須寫)。

// 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>
    )
  }
}

手動路由的跳轉

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

Link或者NavLink渲染出來是一個a元素, 如果我們想點擊一個button或者其他元素實現(xiàn)頁面跳轉, 就需要通過JavaScript代碼進行跳轉了

我們知道Navigate組件是可以進行路由的跳轉的，但是依然是組件的方式。

如果我們希望通過JavaScript代碼邏輯進行跳轉(比如點擊了一個button)，那么就需要獲取到navigate對象。

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

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

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

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

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

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

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

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

export class App extends PureComponent {
  navigateTo(path) {
    // 經過高階組件增強的組件中, 可以在props中拿到navigate
    const { naviagte } = this.props.router
    // 調用navigate
    naviagte(path)
  }

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

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

        <div className='counter'>
          <Routes>
            {/* 當默認路徑 / 時, 重定向到home頁面 */}
            <Route path='/' element={<Navigate to="/home"/>}></Route>
            {/* 配置二級路由 */}
            <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/>}/>
            {/* 當上面路徑都沒有匹配到時, 顯式Notfound組件 */}
            <Route path='*' element={<Notfound/>}/>
          </Routes>
        </div>

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

// 使用高階組件對App組件進行增強
export default withRouter(App)

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

您可能感興趣的文章: