react路由v6版本NavLink的兩個(gè)小坑及解決
更新時(shí)間：2022年10月20日 08:27:21 作者：huangfengnt
這篇文章主要介紹了react路由v6版本NavLink的兩個(gè)小坑及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
react路由v6版本NavLink的兩個(gè)小坑
本人新人，是按照文檔進(jìn)行學(xué)習(xí)的，今遇到兩個(gè)小坑，現(xiàn)記錄如下：
第一點(diǎn)，當(dāng)前版本的NavLink的style或者className當(dāng)中的isActive，不需要你對(duì)isActive進(jìn)行任何操作，基本上照官網(wǎng)抄就可以了，會(huì)自動(dòng)對(duì)isActive屬性進(jìn)行切換。在我看到相關(guān)文章中，好像在之前的版本中習(xí)慣使用內(nèi)部的state對(duì)isActive進(jìn)行true到false的轉(zhuǎn)換。
當(dāng)然，以上只是一個(gè)小問題，最重要的是第二點(diǎn)
第二點(diǎn)，NavLink現(xiàn)在的重點(diǎn)確實(shí)放在了nav上，按照我的實(shí)驗(yàn)，只有當(dāng)NavLink組件放在用作“頂層導(dǎo)航”的時(shí)候，才能正常工作，也就是才能正常顯示出你所配置的active的樣式。以下是一段偽代碼，用來解釋什么是“頂層導(dǎo)航”
//nav是頂層的路由組件
function Nav () {
? return (
? ? <>
? ? ? <main>
? ? ? ? <h2>歡迎來到Nav模塊</h2>
? ? ? ? <p>該模塊是導(dǎo)航模塊,用來測(cè)試相關(guān)功能</p>
? ? ? </main>
? ? ? <nav>
? ? ? ? {/* 通向Counter組件 */}
? ? ? ? <NavLink className={({ isActive }) => isActive ? "green" : "red"} to="/counter">Counter組件</NavLink>
? ? ? ? <br />
? ? ? ? {/* 通往路由測(cè)試頁面 */}
? ? ? ? <NavLink className={({ isActive }) => isActive ? "green" : "red"} to='/routerTest'>routerTest</NavLink>
? ? ? </nav>
? ? ? {/* 下面是子組件的呈現(xiàn)地區(qū)，實(shí)際上就是vue的router-view */}
? ? ? <Outlet />
? ? </>
? );
}以上是第一層級(jí)的組件，分別通向Counter和路由測(cè)試組件，這里面的NavLink就是第一層級(jí)的link導(dǎo)航，是能夠正常工作的，能調(diào)動(dòng)green的樣式接下來再看Nav組件的“路由導(dǎo)航子組件”
function RouterTest () {
? ? const params1 = '參數(shù)一號(hào)準(zhǔn)備就緒'
? ? const params2 = '參數(shù)二號(hào)準(zhǔn)備就緒'
? ??
? ? return (
? ? ? ? <>
? ? ? ? ? ? <h1>歡迎來到RouterTest模塊</h1>
? ? ? ? ? ? {/* 第一個(gè)普通link*/}
? ? ? ? ? ? <Link to={`/routerTest/${params1}`}>ShowParams</Link>
? ? ? ? ? ? <br />
? ? ? ? ? ? {/* 第二個(gè)測(cè)試用的NavLink，這個(gè)因?yàn)槭堑诙蛹?jí)的Link，是不會(huì)激發(fā)active樣式的 */}
? ? ? ? ? ? <NavLink
? ? ? ? ? ? ? ? // className={({ isActive }) => isActive ? "active" : "notActive"}
? ? ? ? ? ? ? ? to={`/routerTest/${params2}`} >
? ? ? ? ? ? ? ? NavLink1
? ? ? ? ? ? </NavLink>
? ? ? ? ? ? {/* 因?yàn)橛凶勇酚?，所以我們這邊還得放一個(gè)Outlet */}
? ? ? ? ? ? <Outlet />
? ? ? ? </>
? ? )
?
}RouterTests是一個(gè)子組件，里面的NavLink不是用來導(dǎo)航的頂層Link，所以不能調(diào)動(dòng)active類的樣式，所以不能正常工作。
以上是我的實(shí)驗(yàn)所得，本人初學(xué)，可能有錯(cuò)誤理解，不過在我的實(shí)驗(yàn)之中確實(shí)呈現(xiàn)的是這個(gè)結(jié)果
以下是一個(gè)官網(wǎng)給的解決辦法，實(shí)際上是通過對(duì)Link組件的包裝實(shí)現(xiàn)的，代碼如下：
import React from "react";
import { Link, useSearchParams } from "react-router-dom"
// 寫一個(gè)外部數(shù)據(jù)
let brands = [{ id: 1, text: 'adidas' }, { id: 2, text: 'puma' }, { id: 3, text: 'nike' }]
export default function FilterLink () {
? ? let brandList = brands.map((brand) => (
? ? ? ? <li key={brand.id}>
? ? ? ? ? ? <BrandLink brand={brand.text}>{brand.text}</BrandLink>
? ? ? ? </li>
? ? ))
? ? return (
? ? ? ? <>
? ? ? ? ? ? <h1>歡迎來到FilterLink</h1>
? ? ? ? ? ? <p>該界面用來測(cè)試使用普通link組件傳遞active參數(shù)</p>
? ? ? ? ? ? <nav>
? ? ? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? ? ? {brandList}
? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? </nav>
? ? ? ? </>
? ? )
}
// 定義一下高階組件BrandLink
function BrandLink ({ brand, children, ...props }) {
? ? let [searchParams] = useSearchParams()
? ? let isActive = searchParams.get("brand") === brand;
? ? return (
? ? ? ? <Link to={`/page1/filterLink/?brand=${brand}`}
? ? ? ? ? ? {...props}
? ? ? ? ? ? style={{
? ? ? ? ? ? ? ? ...props.style,
? ? ? ? ? ? ? ? color: isActive ? "red" : "black",
? ? ? ? ? ? }}>{children}</Link>
? ? )
}這個(gè)方法的原理就是在連接上帶上搜索參數(shù)，然后用搜索參數(shù)和傳入的brand值進(jìn)行全等比較，然后激活樣式。
所以說官網(wǎng)上細(xì)節(jié)還是挺全面的，?？闯Ｐ拢壳皏6版本的路由官網(wǎng)好像還沒有翻譯，所以說英語也是要學(xué)滴。
react 路由React Router（v6）
安裝react-router
yarn install --save react-router
index.js
import React from 'react'
import ReactDOM from 'react-dom'
import {BrowserRouter} from 'react-router-dom'
import App from './App'
ReactDOM.render(
?? ?<BrowserRouter>
?? ??? ?<App/>
?? ?</BrowserRouter>,
?? ?document.getElementById('root')
)一級(jí)路由
<Routes/> 與 <Route/>
v6版本中移出了先前的<Switch>，引入了新的替代者：<Routes>。
<Routes> 和 <Route>要配合使用，且必須要用<Routes>包裹<Route>。
<Route> 相當(dāng)于一個(gè) if 語句，如果其路徑與當(dāng)前 URL 匹配，則呈現(xiàn)其對(duì)應(yīng)的組件。
<Route caseSensitive> 屬性用于指定：匹配時(shí)是否區(qū)分大小寫（默認(rèn)為 false）。
當(dāng)URL發(fā)生變化時(shí)，<Routes> 都會(huì)查看其所有子 <Route> 元素以找到最佳匹配并呈現(xiàn)組件 。
<Route> 也可以嵌套使用，且可配合useRoutes()配置 “路由表” ，但需要通過 <Outlet> 組件來渲染其子路由。
import React from 'react'
import {NavLink,Routes,Route} from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home'
export default function App() {
?? ?return (
?? ??? ?<div>
?? ??? ??? ?<div className="row">
?? ??? ??? ??? ?<div className="col-xs-2 col-xs-offset-2">
?? ??? ??? ??? ??? ?<div className="list-group">
?? ??? ??? ??? ??? ??? ?{/* 路由鏈接 */}
?? ??? ??? ??? ??? ??? ?<NavLink className="list-group-item" to="/about">About</NavLink>
?? ??? ??? ??? ??? ??? ?<NavLink className="list-group-item" to="/home">Home</NavLink>
?? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ?</div>
?? ??? ??? ??? ?<div className="col-xs-6">
?? ??? ??? ??? ??? ?<div className="panel">
?? ??? ??? ??? ??? ??? ?<div className="panel-body">
?? ??? ??? ??? ??? ??? ??? ?{/* 注冊(cè)路由 */}
?? ??? ??? ??? ??? ??? ??? ?<Routes>
?? ??? ??? ??? ??? ??? ??? ??? ?<Route path="/about" element={<About/>}/>
?? ??? ??? ??? ??? ??? ??? ??? ?<Route path="/home" element={<Home/>}/>
?? ??? ??? ??? ??? ??? ??? ?</Routes>
?? ??? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ?</div>
?? ??? ??? ?</div>
?? ??? ?</div>
?? ?)
}重定向
<Navigate>
作用：只要<Navigate>組件被渲染，就會(huì)修改路徑，切換視圖。
replace屬性用于控制跳轉(zhuǎn)模式（push 或 replace，默認(rèn)是push）。
import React from 'react'
import {NavLink,Routes,Route,Navigate} from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home'
export default function App() {
?? ?return (
?? ??? ?<div>
?? ??? ??? ?<div className="row">
?? ??? ??? ??? ?<div className="col-xs-2 col-xs-offset-2">
?? ??? ??? ??? ??? ?<div className="list-group">
?? ??? ??? ??? ??? ??? ?{/* 路由鏈接 */}
?? ??? ??? ??? ??? ??? ?<NavLink className="list-group-item" to="/about">About</NavLink>
?? ??? ??? ??? ??? ??? ?<NavLink className="list-group-item" to="/home">Home</NavLink>
?? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ?</div>
?? ??? ??? ??? ?<div className="col-xs-6">
?? ??? ??? ??? ??? ?<div className="panel">
?? ??? ??? ??? ??? ??? ?<div className="panel-body">
?? ??? ??? ??? ??? ??? ??? ?{/* 注冊(cè)路由 */}
?? ??? ??? ??? ??? ??? ??? ?<Routes>
?? ??? ??? ??? ??? ??? ??? ??? ?<Route path="/ABOUT" element={<About/>}/>
?? ??? ??? ??? ??? ??? ??? ??? ?<Route path="/home" element={<Home/>}/>
?? ??? ??? ??? ??? ??? ??? ??? ?<Route path="/" element={<Navigate to="/about"/>}/>
?? ??? ??? ??? ??? ??? ??? ?</Routes>
?? ??? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ?</div>
?? ??? ??? ?</div>
?? ??? ?</div>
?? ?)
}
-----------------------
import React,{useState} from 'react'
import {Navigate} from 'react-router-dom'
export default function Home() {
?? ?const [sum,setSum] = useState(1)
?? ?return (
?? ??? ?<div>
?? ??? ??? ?<h3>我是Home的內(nèi)容</h3>
?? ??? ??? ?{sum === 2 ? <Navigate to="/about" replace={true}/> : <h4>當(dāng)前sum的值是：{sum}</h4>}
?? ??? ??? ?<button onClick={()=>setSum(2)}>點(diǎn)我將sum變?yōu)?</button>
?? ??? ?</div>
?? ?)
}NavLink高亮
<NavLink>
作用: 與<Link>組件類似，且可實(shí)現(xiàn)導(dǎo)航的“高亮”效果。
示例代碼：
// 注意: NavLink默認(rèn)類名是active，下面是指定自定義的class
//自定義樣式
<NavLink
? ? to="login"
? ? className={({ isActive }) => {
? ? ? ? console.log('home', isActive)
? ? ? ? return isActive ? 'base one' : 'base'
? ? }}
>login</NavLink>
/*
?? ?默認(rèn)情況下，當(dāng)Home的子組件匹配成功，Home的導(dǎo)航也會(huì)高亮，
?? ?當(dāng)NavLink上添加了end屬性后，若Home的子組件匹配成功，則Home的導(dǎo)航?jīng)]有高亮效果。
*/
<NavLink to="home" end >home</NavLink>import React from 'react'
import {NavLink,Routes,Route,Navigate} from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home'
export default function App() {
?? ?function computedClassName({isActive}){
?? ??? ?return isActive ? 'list-group-item atguigu' : 'list-group-item'
?? ?}
?? ?return (
?? ??? ?<div>
?? ??? ??? ?<div className="row">
?? ??? ??? ??? ?<div className="col-xs-2 col-xs-offset-2">
?? ??? ??? ??? ??? ?<div className="list-group">
?? ??? ??? ??? ??? ??? ?{/* 路由鏈接 */}
?? ??? ??? ??? ??? ??? ?<NavLink className={computedClassName} to="/about">About</NavLink>
?? ??? ??? ??? ??? ??? ?<NavLink className={computedClassName} to="/home">Home</NavLink>
?? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ?</div>
?? ??? ??? ??? ?<div className="col-xs-6">
?? ??? ??? ??? ??? ?<div className="panel">
?? ??? ??? ??? ??? ??? ?<div className="panel-body">
?? ??? ??? ??? ??? ??? ??? ?{/* 注冊(cè)路由 */}
?? ??? ??? ??? ??? ??? ??? ?<Routes>
?? ??? ??? ??? ??? ??? ??? ??? ?<Route path="/ABOUT" element={<About/>}/>
?? ??? ??? ??? ??? ??? ??? ??? ?<Route path="/home" element={<Home/>}/>
?? ??? ??? ??? ??? ??? ??? ??? ?<Route path="/" element={<Navigate to="/about"/>}/>
?? ??? ??? ??? ??? ??? ??? ?</Routes>
?? ??? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ?</div>
?? ??? ??? ?</div>
?? ??? ?</div>
?? ?)
}useRoutes路由表----嵌套路由
useRoutes()
作用：根據(jù)路由表，動(dòng)態(tài)創(chuàng)建<Routes>和<Route>。
<Outlet>----渲染任何匹配的子級(jí)
當(dāng)<Route>產(chǎn)生嵌套時(shí)，渲染其對(duì)應(yīng)的后續(xù)子路由。
routers/index.js
export default [
?? ?{
?? ??? ?path:'/about',
?? ??? ?element:<About/>
?? ?},
?? ?{
?? ??? ?path:'/home',
?? ??? ?element:<Home/>,
?? ??? ?children:[
?? ??? ??? ?{
?? ??? ??? ??? ?path:'news',
?? ??? ??? ??? ?element:<News/>
?? ??? ??? ?},
?? ??? ??? ?{
?? ??? ??? ??? ?path:'message',
?? ??? ??? ??? ?element:<Message/>
?? ??? ??? ?}
?? ??? ?]
?? ?},
?? ?{
?? ??? ?path:'/',
?? ??? ?element:<Navigate to="/about"/>
?? ?}
]
---
import React from 'react'
import {NavLink,useRoutes} from 'react-router-dom'
import routes from './routes'
export default function App() {
?? ?//根據(jù)路由表生成對(duì)應(yīng)的路由規(guī)則
?? ?const element = useRoutes(routes)
?? ?return (
?? ??? ?<div>
?? ??? ??? ?<div className="row">
?? ??? ??? ??? ?<div className="col-xs-2 col-xs-offset-2">
?? ??? ??? ??? ??? ?<div className="list-group">
?? ??? ??? ??? ??? ??? ?{/* 路由鏈接 */}
?? ??? ??? ??? ??? ??? ?<NavLink className="list-group-item" to="/about">About</NavLink>
?? ??? ??? ??? ??? ??? ?<NavLink className="list-group-item" to="/home">Home</NavLink>
?? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ?</div>
?? ??? ??? ??? ?<div className="col-xs-6">
?? ??? ??? ??? ??? ?<div className="panel">
?? ??? ??? ??? ??? ??? ?<div className="panel-body">
?? ??? ??? ??? ??? ??? ??? ?{/* 注冊(cè)路由 */}
?? ??? ??? ??? ??? ??? ??? ?{element}
?? ??? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ?</div>
?? ??? ??? ?</div>
?? ??? ?</div>
?? ?)
}
---
import React from 'react'
import {NavLink,Outlet} from 'react-router-dom'
export default function Home() {
?? ?return (
?? ??? ?<div>
?? ??? ??? ?<h2>Home組件內(nèi)容</h2>
?? ??? ??? ?<div>
?? ??? ??? ??? ?<ul className="nav nav-tabs">
?? ??? ??? ??? ??? ?<li>
?? ??? ??? ??? ??? ??? ?<NavLink className="list-group-item" to="news">News</NavLink>
?? ??? ??? ??? ??? ?</li>
?? ??? ??? ??? ??? ?<li>
?? ??? ??? ??? ??? ??? ?<NavLink className="list-group-item" to="message">Message</NavLink>
?? ??? ??? ??? ??? ?</li>
?? ??? ??? ??? ?</ul>
?? ??? ??? ??? ?{/* 指定路由組件呈現(xiàn)的位置 */}
?? ??? ??? ??? ?<Outlet />
?? ??? ??? ?</div>
?? ??? ?</div>
?? ?)
}路由的params參數(shù)
useParams()
作用：返回當(dāng)前匹配路由的params參數(shù)，類似于5.x中的match.params。
import React,{useState} from 'react'
import {Link,Outlet} from 'react-router-dom'
export default function Message() {
?? ?const [messages] = useState([
?? ??? ?{id:'001',title:'消息1',content:'鋤禾日當(dāng)午'},
?? ??? ?{id:'002',title:'消息2',content:'汗滴禾下土'},
?? ??? ?{id:'003',title:'消息3',content:'誰知盤中餐'},
?? ??? ?{id:'004',title:'消息4',content:'粒粒皆辛苦'}
?? ?])
?? ?return (
?? ??? ?<div>
?? ??? ??? ?<ul>
?? ??? ??? ??? ?{
?? ??? ??? ??? ??? ?messages.map((m)=>{
?? ??? ??? ??? ??? ??? ?return (
?? ??? ??? ??? ??? ??? ??? ?// 路由鏈接
?? ??? ??? ??? ??? ??? ??? ?<li key={m.id}>
?? ??? ??? ??? ??? ??? ??? ??? ?<Link to={`detail/${m.id}/${m.title}/${m.content}`}>{m.title}</Link>
?? ??? ??? ??? ??? ??? ??? ?</li>
?? ??? ??? ??? ??? ??? ?)
?? ??? ??? ??? ??? ?})
?? ??? ??? ??? ?}
?? ??? ??? ?</ul>
?? ??? ??? ?<hr />
?? ??? ??? ?{/* 指定路由組件的展示位置 */}
?? ??? ??? ?<Outlet />
?? ??? ?</div>
?? ?)
}
----
import React from 'react'
import {useParams,useMatch} from 'react-router-dom'
export default function Detail() {
?? ?const {id,title,content} = useParams()
?? ?// const x = useMatch('/home/message/detail/:id/:title/:content')
?? ?// console.log(x)
?? ?return (
?? ??? ?<ul>
?? ??? ??? ?<li>消息編號(hào)：{id}</li>
?? ??? ??? ?<li>消息標(biāo)題：{title}</li>
?? ??? ??? ?<li>消息內(nèi)容：{content}</li>
?? ??? ?</ul>
?? ?)
}
----
export default [
?? ?{
?? ??? ?path:'/about',
?? ??? ?element:<About/>
?? ?},
?? ?{
?? ??? ?path:'/home',
?? ??? ?element:<Home/>,
?? ??? ?children:[
?? ??? ??? ?{
?? ??? ??? ??? ?path:'news',
?? ??? ??? ??? ?element:<News/>
?? ??? ??? ?},
?? ??? ??? ?{
?? ??? ??? ??? ?path:'message',
?? ??? ??? ??? ?element:<Message/>,
?? ??? ??? ??? ?children:[
?? ??? ??? ??? ??? ?{
?? ??? ??? ??? ??? ??? ?path:'detail/:id/:title/:content',
?? ??? ??? ??? ??? ??? ?element:<Detail/>
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?]
?? ??? ??? ?}
?? ??? ?]
?? ?},
?? ?{
?? ??? ?path:'/',
?? ??? ?element:<Navigate to="/about"/>
?? ?}
]路由的search參數(shù)
useSearchParams()
作用：用于讀取和修改當(dāng)前位置的 URL 中的查詢字符串。
返回一個(gè)包含兩個(gè)值的數(shù)組，內(nèi)容分別為：當(dāng)前的seaech參數(shù)、更新search的函數(shù)。
useLocation()
作用：獲取當(dāng)前 location 信息，對(duì)標(biāo)5.x中的路由組件的location屬性。
export default [
?? ?{
?? ??? ?path:'/about',
?? ??? ?element:<About/>
?? ?},
?? ?{
?? ??? ?path:'/home',
?? ??? ?element:<Home/>,
?? ??? ?children:[
?? ??? ??? ?{
?? ??? ??? ??? ?path:'news',
?? ??? ??? ??? ?element:<News/>
?? ??? ??? ?},
?? ??? ??? ?{
?? ??? ??? ??? ?path:'message',
?? ??? ??? ??? ?element:<Message/>,
?? ??? ??? ??? ?children:[
?? ??? ??? ??? ??? ?{
?? ??? ??? ??? ??? ??? ?path:'detail',
?? ??? ??? ??? ??? ??? ?element:<Detail/>
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?]
?? ??? ??? ?}
?? ??? ?]
?? ?},
?? ?{
?? ??? ?path:'/',
?? ??? ?element:<Navigate to="/about"/>
?? ?}
]
----
import React,{useState} from 'react'
import {Link,Outlet} from 'react-router-dom'
export default function Message() {
?? ?const [messages] = useState([
?? ??? ?{id:'001',title:'消息1',content:'鋤禾日當(dāng)午'},
?? ??? ?{id:'002',title:'消息2',content:'汗滴禾下土'},
?? ??? ?{id:'003',title:'消息3',content:'誰知盤中餐'},
?? ??? ?{id:'004',title:'消息4',content:'粒粒皆辛苦'}
?? ?])
?? ?return (
?? ??? ?<div>
?? ??? ??? ?<ul>
?? ??? ??? ??? ?{
?? ??? ??? ??? ??? ?messages.map((m)=>{
?? ??? ??? ??? ??? ??? ?return (
?? ??? ??? ??? ??? ??? ??? ?// 路由鏈接
?? ??? ??? ??? ??? ??? ??? ?<li key={m.id}>
?? ??? ??? ??? ??? ??? ??? ??? ?<Link to={`detail?id=${m.id}&title=${m.title}&content=${m.content}`}>{m.title}</Link>
?? ??? ??? ??? ??? ??? ??? ?</li>
?? ??? ??? ??? ??? ??? ?)
?? ??? ??? ??? ??? ?})
?? ??? ??? ??? ?}
?? ??? ??? ?</ul>
?? ??? ??? ?<hr />
?? ??? ??? ?{/* 指定路由組件的展示位置 */}
?? ??? ??? ?<Outlet />
?? ??? ?</div>
?? ?)
}
----
import React from 'react'
import {useSearchParams,useLocation} from 'react-router-dom'
export default function Detail() {
?? ?const [search,setSearch] = useSearchParams()
?? ?const id = search.get('id')
?? ?const title = search.get('title')
?? ?const content = search.get('content')
?? ?const x = useLocation()
?? ?console.log('@',x)
?? ?return (
?? ??? ?<ul>
?? ??? ??? ?<li>
?? ??? ??? ??? ?<button onClick={()=>setSearch('id=008&title=哈哈&content=嘻嘻')}>點(diǎn)我更新一下收到的search參數(shù)</button>
?? ??? ??? ?</li>
?? ??? ??? ?<li>消息編號(hào)：{id}</li>
?? ??? ??? ?<li>消息標(biāo)題：{title}</li>
?? ??? ??? ?<li>消息內(nèi)容：{content}</li>
?? ??? ?</ul>
?? ?)
}路由的state參數(shù)
useLocation()
作用：獲取當(dāng)前 location 信息，對(duì)標(biāo)5.x中的路由組件的location屬性。
export default function Message() {
?? ?const [messages] = useState([
?? ??? ?{id:'001',title:'消息1',content:'鋤禾日當(dāng)午'},
?? ??? ?{id:'002',title:'消息2',content:'汗滴禾下土'},
?? ??? ?{id:'003',title:'消息3',content:'誰知盤中餐'},
?? ??? ?{id:'004',title:'消息4',content:'粒粒皆辛苦'}
?? ?])
?? ?return (
?? ??? ?<div>
?? ??? ??? ?<ul>
?? ??? ??? ??? ?{
?? ??? ??? ??? ??? ?messages.map((m)=>{
?? ??? ??? ??? ??? ??? ?return (
?? ??? ??? ??? ??? ??? ??? ?// 路由鏈接
?? ??? ??? ??? ??? ??? ??? ?<li key={m.id}>
?? ??? ??? ??? ??? ??? ??? ??? ?<Link?
?? ??? ??? ??? ??? ??? ??? ??? ??? ?to="detail"?
?? ??? ??? ??? ??? ??? ??? ??? ??? ?state={{
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?id:m.id,
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?title:m.title,
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?content:m.content,
?? ??? ??? ??? ??? ??? ??? ??? ??? ?}}
?? ??? ??? ??? ??? ??? ??? ??? ?>{m.title}</Link>
?? ??? ??? ??? ??? ??? ??? ?</li>
?? ??? ??? ??? ??? ??? ?)
?? ??? ??? ??? ??? ?})
?? ??? ??? ??? ?}
?? ??? ??? ?</ul>
?? ??? ??? ?<hr />
?? ??? ??? ?{/* 指定路由組件的展示位置 */}
?? ??? ??? ?<Outlet />
?? ??? ?</div>
?? ?)
}
----
import React from 'react'
import {useLocation} from 'react-router-dom'
export default function Detail() {
?? ?const {state:{id,title,content}} = useLocation()
?? ?return (
?? ??? ?<ul>
?? ??? ??? ?<li>消息編號(hào)：{id}</li>
?? ??? ??? ?<li>消息標(biāo)題：{title}</li>
?? ??? ??? ?<li>消息內(nèi)容：{content}</li>
?? ??? ?</ul>
?? ?)
}編程式路由導(dǎo)航
useNavigate()
作用：返回一個(gè)函數(shù)用來實(shí)現(xiàn)編程式導(dǎo)航。
示例代碼：
import React from 'react'
import {useNavigate} from 'react-router-dom'
export default function Demo() {
? const navigate = useNavigate()
? const handle = () => {
? ? //第一種使用方式：指定具體的路徑
? ? navigate('/login', {
? ? ? replace: false,
? ? ? state: {a:1, b:2}
? ? })?
? ? //第二種使用方式：傳入數(shù)值進(jìn)行前進(jìn)或后退，類似于5.x中的 history.go()方法
? ? navigate(-1)
? }
??
? return (
? ? <div>
? ? ? <button onClick={handle}>按鈕</button>
? ? </div>
? )
}useMatch()
作用：返回當(dāng)前匹配信息，對(duì)標(biāo)5.x中的路由組件的match屬性。
useInRouterContext()
作用：如果組件在 <Router> 的上下文中呈現(xiàn)，則 useInRouterContext 鉤子返回 true，否則返回 false。
useNavigationType()
作用：返回當(dāng)前的導(dǎo)航類型（用戶是如何來到當(dāng)前頁面的）。
返回值：POP、PUSH、REPLACE。
備注：POP是指在瀏覽器中直接打開了這個(gè)路由組件（刷新頁面）。
useOutlet()
作用：用來呈現(xiàn)當(dāng)前組件中渲染的嵌 套路由。
示例代碼：
const result = useOutlet() console.log(result) // 如果嵌套路由沒有掛載,則result為null // 如果嵌套路由已經(jīng)掛載,則展示嵌套的路由對(duì)象
useResolvedPath()
作用：給定一個(gè) URL值，解析其中的：path、search、hash值。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
react-navigation之動(dòng)態(tài)修改title的內(nèi)容
這篇文章主要介紹了react-navigation之動(dòng)態(tài)修改title的內(nèi)容，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了React日期時(shí)間顯示組件的封裝方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
在react中常用props實(shí)現(xiàn)子組件數(shù)據(jù)到父組件的傳遞,但是父組件調(diào)用子組件的功能卻不常用,下面這篇文章主要給大家介紹了關(guān)于react父組件調(diào)用子組件的相關(guān)資料,需要的朋友可以參考下2022-08-08
本文主要介紹了react中事件處理與柯里化的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要為大家介紹了React?Suspense前后端IO異步操作處理示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
這篇文章主要為大家詳細(xì)介紹了React列表欄及購物車組件使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
React?實(shí)現(xiàn)具備吸頂和吸底功能組件實(shí)例
這篇文章主要為大家介紹了React?實(shí)現(xiàn)具備吸頂和吸底功能組件實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
react 報(bào)錯(cuò)Module build failed: Browserslis
這篇文章主要介紹了react 報(bào)錯(cuò)Module build failed: BrowserslistError: Unknown browser query `dead`問題的解決方法,需要的朋友可以參考下2023-06-06
在現(xiàn)代開發(fā)中的彈窗樣式,經(jīng)常會(huì)是底部一個(gè)叉號(hào)樣式的彈窗,但是目前組件庫中并無類似彈窗組件,本文小編給大家介紹了React使用api的方式封裝彈窗的示例,感興趣的小伙伴跟著小編一起來看看吧2024-09-09
React創(chuàng)建組件的三種方式及其區(qū)別
本文主要介紹了React創(chuàng)建組件的三種方式及其區(qū)別，具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01