欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React中路由的參數(shù)傳遞路由的配置文件詳解

 更新時(shí)間：2022年11月06日 15:19:30   作者：藍(lán)桉cyq  
路由的配置文件目前我們所有的路由定義都是直接使用Route組件，并且添加屬性來(lái)完成的，路由的參數(shù)傳遞有二種方式這，兩種方式在Router6.x中都是提供的hook函數(shù)的API,?類組件需要通過(guò)高階組件的方式使用，本文通過(guò)示例代碼詳解講解，需要的朋友參考下吧

路由的參數(shù)傳遞

傳遞參數(shù)有二種方式(需要注意的是, 這兩種方式在Router6.x中都是提供的hook函數(shù)的API, 類組件需要通過(guò)高階組件的方式使用):

動(dòng)態(tài)路由的方式;

search傳遞參數(shù)(查詢字符串);

方式一: 動(dòng)態(tài)路由的概念指的是路由中的路徑并不會(huì)固定:

比如/detail的path對(duì)應(yīng)一個(gè)組件Detail;

如果我們將path在Route匹配時(shí)寫成/detail/:id，那么 /detail/111、/detail/123都可以匹配到該Route，并且進(jìn)行顯示;

這個(gè)匹配規(guī)則，我們就稱之為動(dòng)態(tài)路由;

通常情況下，使用動(dòng)態(tài)路由可以為路由傳遞參數(shù)。

配置動(dòng)態(tài)路由

render() {
  return (
    <div className='app'>
      <div className='header'>
        <Link to="detail/123">詳情123</Link>
        <Link to="detail/321">詳情321</Link>
        <Link to="detail/aaa">詳情aaa</Link>
      </div>

      <div className='counter'>
        <Routes>
          <Route path='/detail/:id' element={<Detail/>}/>
        </Routes>
      </div>

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

在跳轉(zhuǎn)的頁(yè)面中可以通過(guò)hook函數(shù)useParms獲取到傳入的id, 由于我們現(xiàn)在使用的是類組件, 無(wú)法使用hook函數(shù), 因此需要通過(guò)高階組件對(duì)當(dāng)前組件增強(qiáng)(上一篇?jiǎng)倓傊v過(guò)高階組件的封裝, 這里直接使用, 給到大家代碼)

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

export default function withRouter(WrapperComponent) {
  return function(props) {
    const naviagte = useNavigate()
    const params = useParams()
    const router = {naviagte, params}

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

使用高階組件增強(qiáng)當(dāng)前Detail組件, 就可以通過(guò)useParams獲取到傳遞的id

import React, { PureComponent } from 'react'
import withRouter from '../hoc/with_router'

export class Detail extends PureComponent {
  render() {
    // 獲取到params
    const { params } = this.props.router

    return (
      <div>
        <h2>Detail</h2>
        {/* 通過(guò)params獲取到id并展示 */}
        <h2>id: {params.id}</h2>
      </div>
    )
  }
}

export default withRouter(Detail)

方式二: search傳遞參數(shù)(也就是查詢字符串的方式), 這里在User組件中進(jìn)行演示

在路由跳轉(zhuǎn)時(shí)拼接上查詢字符串

render() {
  return (
    <div className='app'>
      <div className='header'>
        <Link to="/user?name=chenyq&age=18&height=1.88">用戶</Link>
      </div>

      <div className='counter'>
        <Routes>
          <Route path='/user' element={<User/>} />
        </Routes>
      </div>

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

查詢字符串需要通過(guò)hook函數(shù)useSearchParams獲取, 所以我們也需要使用高階組件對(duì)User組件進(jìn)行增強(qiáng)

// 封裝的高階組件

import { useNavigate, useParams, useSearchParams } from "react-router-dom"

export default function withRouter(WrapperComponent) {
  return function(props) {
    // 1.導(dǎo)航
    const naviagte = useNavigate()

    // 2.動(dòng)態(tài)路由的參數(shù)
    const params = useParams()

    // 3.查詢字符串的參數(shù)
    const [searchParams] = useSearchParams()
    const query = Object.fromEntries(searchParams.entries)

    const router = {naviagte, params, query}
    return <WrapperComponent {...props} router={router} />
  }
}

在組件中就可以獲取到參數(shù)

import React, { PureComponent } from 'react'
import withRouter from '../hoc/with_router'

export class User extends PureComponent {
  render() {
    // 獲取高階組件中的query
    const { query } = this.props.router

    return (
      <div>
        <h2>User</h2>
        {/* 通過(guò)query獲取參數(shù) */}
        <h2>參數(shù): {query.name}-{query.age}-{query.height}</h2>
      </div>
    )
  }
}

export default withRouter(User)

路由的配置文件

目前我們所有的路由定義都是直接使用Route組件，并且添加屬性來(lái)完成的。

但是這樣的方式會(huì)讓路由變得非?；靵y，我們希望像vue-router那樣, 將所有的路由配置放到一個(gè)單獨(dú)的文件進(jìn)行集中管理:

在早期的時(shí)候，Router并且沒(méi)有提供相關(guān)的API，我們需要借助于react-router-config完成;

在Router6.x中，為我們提供了useRoutes API可以完成相關(guān)的配置;

例如我們將下面的映射關(guān)系配置到一個(gè)單獨(dú)的文件中

<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/>}/>
    <Route path='/detail/:id' element={<Detail/>}/>
    <Route path='/user' element={<User/>} />
    {/* 當(dāng)上面路徑都沒(méi)有匹配到時(shí), 顯式Notfound組件 */}
    <Route path='*' element={<Notfound/>}/>
  </Routes>
</div>

首先, 使用useRoutes這個(gè)API替代原來(lái)的Routes和Route組件, useRoutes可以當(dāng)成一個(gè)函數(shù)直接使用, 但是只能在函數(shù)組件中使用

<div className='counter'>
  {useRoutes(routes)}
</div>

再在route/index.js中對(duì)映射關(guān)系進(jìn)行配置

import { Navigate } from "react-router-dom"
import Home from '../pages/Home'
import About from '../pages/About'
import Profile from '../pages/Profile'
import Notfound from '../pages/Notfound'
import HomeRecommend from '../pages/HomeRecommend'
import HomeRanking from '../pages/HomeRanking'
import Category from '../pages/Category'
import Order from '../pages/Order'
import Detail from '../pages/Detail'
import User from '../pages/User'

const routes = [
  {
    path: "/",
    element: <Navigate to="/home"/>
  },
  {
    path: "/home",
    element: <Home/>,
    children: [
      {
        path: "/home",
        element: <Navigate to="/home/recommend" />
      },
      {
        path: "/home/recommend",
        element: <HomeRecommend/>
      },
      {
        path: "/home/ranking",
        element: <HomeRanking/>
      }
    ]
  },
  {
    path: "/about",
    element: <About/>
  },
  {
    path: "/profile",
    element: <Profile/>
  },
  {
    path: "/category",
    element: <Category/>
  },
  {
    path: "/order",
    element: <Order/>
  },
  {
    path: "detail/:id",
    element: <Detail/>
  },
  {
    path: "/user",
    element: <User/>
  },
  {
    path: "*",
    element: <Notfound/>
  }
]

export default routes

如果我們對(duì)某些組件進(jìn)行了異步加載(懶加載, 分包處理)，那么需要使用Suspense進(jìn)行包裹:

例如我們對(duì)Detail和User進(jìn)行懶加載(分包處理)

// import Detail from '../pages/Detail'
// import User from '../pages/User'

const Detail = React.lazy(() => import("../pages/Detail"))
const User = React.lazy(() => import("../pages/User"))

并且還需要使用Suspense對(duì)組件進(jìn)行包裹

root.render(
  <HashRouter>
    <Suspense fallback={<h3>loading</h3>}>
      <App/>
    </Suspense>
  </HashRouter>
)

到此這篇關(guān)于React中路由的參數(shù)傳遞 - 路由的配置文件的文章就介紹到這了,更多相關(guān)React路由參數(shù)傳遞內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論