react路由v6版本NavLink的两个小坑及解决

第react路由v6版本NavLink的两个小坑及解决目录react路由v6版本NavLink的两个小坑react路由ReactRouter（v6）安装react-router一级路由重定向NavLink高亮useRoutes路由表嵌套路由路由的params参数路由的search参数路由的state参数编程式路由导航

react路由v6版本NavLink的两个小坑

本人新人，是按照文档进行学习的，今遇到两个小坑，现记录如下：

第一点，当前版本的NavLink的style或者className当中的isActive，不需要你对isActive进行任何操作，基本上照官网抄就可以了，会自动对isActive属性进行切换。在我看到相关文章中，好像在之前的版本中习惯使用内部的state对isActive进行true到false的转换。

当然，以上只是一个小问题，最重要的是第二点

第二点，NavLink现在的重点确实放在了nav上，按照我的实验，只有当NavLink组件放在用作顶层导航的时候，才能正常工作，也就是才能正常显示出你所配置的active的样式。以下是一段伪代码，用来解释什么是顶层导航

//nav是顶层的路由组件

functionNav(){

return(

main

h2欢迎来到Nav模块/h2

p该模块是导航模块,用来测试相关功能/p

/main

nav

{/*通向Counter组件*/}

NavLinkclassName={({isActive})=isActive"green":"red"}to="/counter"Counter组件/NavLink

br/

{/*通往路由测试页面*/}

NavLinkclassName={({isActive})=isActive"green":"red"}to='/routerTest'routerTest/NavLink

/nav

{/*下面是子组件的呈现地区，实际上就是vue的router-view*/}

Outlet/

/

}

以上是第一层级的组件，分别通向Counter和路由测试组件，这里面的NavLink就是第一层级的link导航，是能够正常工作的，能调动green的样式接下来再看Nav组件的路由导航子组件

functionRouterTest(){

constparams1='参数一号准备就绪'

constparams2='参数二号准备就绪'

return(

h1欢迎来到RouterTest模块/h1

{/*第一个普通link*/}

Linkto={`/routerTest/${params1}`}ShowParams/Link

br/

{/*第二个测试用的NavLink，这个因为是第二层级的Link，是不会激发active样式的*/}

NavLink

//className={({isActive})=isActive"active":"notActive"}

to={`/routerTest/${params2}`}

NavLink1

/NavLink

{/*因为有子路由，所以我们这边还得放一个Outlet*/}

Outlet/

/

)

}

RouterTests是一个子组件，里面的NavLink不是用来导航的顶层Link，所以不能调动active类的样式，所以不能正常工作。

以上是我的实验所得，本人初学，可能有错误理解，不过在我的实验之中确实呈现的是这个结果

以下是一个官网给的解决办法，实际上是通过对Link组件的包装实现的，代码如下：

importReactfrom"react";

import{Link,useSearchParams}from"react-router-dom"

//写一个外部数据

letbrands=[{id:1,text:'adidas'},{id:2,text:'puma'},{id:3,text:'nike'}]

exportdefaultfunctionFilterLink(){

letbrandList=brands.map((brand)=(

likey={brand.id}

BrandLinkbrand={brand.text}{brand.text}/BrandLink

/li

))

return(

h1欢迎来到FilterLink/h1

p该界面用来测试使用普通link组件传递active参数/p

nav

ul

{brandList}

/ul

/nav

/

)

//定义一下高阶组件BrandLink

functionBrandLink({brand,children,...props}){

let[searchParams]=useSearchParams()

letisActive=searchParams.get("brand")===brand;

return(

Linkto={`/page1/filterLink/brand=${brand}`}

{...props}

"red":"black",

}}{children}/Link

)

}

这个方法的原理就是在连接上带上搜索参数，然后用搜索参数和传入的brand值进行全等比较，然后激活样式。

所以说官网上细节还是挺全面的，常看常新，目前v6版本的路由官网好像还没有翻译，所以说英语也是要学滴。

react路由ReactRouter（v6）

安装react-router

yarninstall--savereact-router

index.js

importReactfrom'react'

importReactDOMfrom'react-dom'

import{BrowserRouter}from'react-router-dom'

importAppfrom'./App'

ReactDOM.render(

BrowserRouter

App/

/BrowserRouter,

document.getElementById('root')

)

一级路由

Routes/与Route/

v6版本中移出了先前的Switch，引入了新的替代者：Routes。

Routes和Route要配合使用，且必须要用Routes包裹Route。

Route相当于一个if语句，如果其路径与当前URL匹配，则呈现其对应的组件。

RoutecaseSensitive属性用于指定：匹配时是否区分大小写（默认为false）。

当URL发生变化时，Routes都会查看其所有子Route元素以找到最佳匹配并呈现组件。

Route也可以嵌套使用，且可配合useRoutes()配置路由表，但需要通过Outlet组件来渲染其子路由。

importReactfrom'react'

import{NavLink,Routes,Route}from'react-router-dom'

importAboutfrom'./pages/About'

importHomefrom'./pages/Home'

exportdefaultfunctionApp(){

return(

div

divclassName="row"

divclassName="col-xs-2col-xs-offset-2"

divclassName="list-group"

{/*路由链接*/}

NavLinkclassName="list-group-item"to="/about"About/NavLink

NavLinkclassName="list-group-item"to="/home"Home/NavLink

/div

/div

divclassName="col-xs-6"

divclassName="panel"

divclassName="panel-body"

{/*注册路由*/}

Routes

Routepath="/about"element={About/}/

Routepath="/home"element={Home/}/

/Routes

/div

/div

/div

/div

/div

)

}

重定向

Navigate

作用：只要Navigate组件被渲染，就会修改路径，切换视图。

replace属性用于控制跳转模式（push或replace，默认是push）。

importReactfrom'react'

import{NavLink,Routes,Route,Navigate}from'react-router-dom'

importAboutfrom'./pages/About'

importHomefrom'./pages/Home'

exportdefaultfunctionApp(){

return(

div

divclassName="row"

divclassName="col-xs-2col-xs-offset-2"

divclassName="list-group"

{/*路由链接*/}

NavLinkclassName="list-group-item"to="/about"About/NavLink

NavLinkclassName="list-group-item"to="/home"Home/NavLink

/div

/div

divclassName="col-xs-6"

divclassName="panel"

divclassName="panel-body"

{/*注册路由*/}

Routes

Routepath="/ABOUT"element={About/}/

Routepath="/home"element={Home/}/

Routepath="/"element={Navigateto="/about"/}/

/Routes

/div

/div

/div

/div

/div

)

importReact,{useState}from'react'

import{Navigate}from'react-router-dom'

exportdefaultfunctionHome(){

const[sum,setSum]=useState(1)

return(

div

h3我是Home的内容/h3

{sum===2Navigateto="/about"replace={true}/:h4当前sum的值是：{sum}/h4}

button()=setSum(2)}点我将sum变为2/button

/div

)

}

NavLink高亮

NavLink

作用:与Link组件类似，且可实现导航的高亮效果。

示例代码：

//注意:NavLink默认类名是active，下面是指定自定义的class

//自定义样式

NavLink

to="login"

className={({isActive})={

console.log('home',isActive)

returnisActive'baseone':'base'

}}

login/NavLink

默认情况下，当Home的子组件匹配成功，Home的导航也会高亮，

当NavLink上添加了end属性后，若Home的子组件匹配成功，则Home的导航没有高亮效果。

NavLinkto="home"endhome/NavLink

importReactfrom'react'

import{NavLink,Routes,Route,Navigate}from'react-router-dom'

importAboutfrom'./pages/About'

importHomefrom'./pages/Home'

exportdefaultfunctionApp(){

functioncomputedClassName({isActive}){

returnisActive'list-group-itematguigu':'list-group-item'

}

return(

div

divclassName="row"

divclassName="col-xs-2col-xs-offset-2"

divclassName="list-group"

{/*路由链接*/}

NavLinkclassName={computedClassName}to="/about"About/NavLink

NavLinkclassName={computedClassName}to="/home"Home/NavLink

/div

/div

divclassName="col-xs-6"

divclassName="panel"

divclassName="panel-body"

{/*注册路由*/}

Routes

Routepath="/ABOUT"element={About/}/

Routepath="/home"element={Home/}/

Routepath="/"element={Navigateto="/about"/}/

/Routes

/div

/div

/div

/div

/div

)

}

useRoutes路由表嵌套路由

useRoutes()

作用：根据路由表，动态创建Routes和Route。

Outlet渲染任何匹配的子级

当Route产生嵌套时，渲染其对应的后续子路由。

routers/index.js

exportdefault[

{

path:'/about',

element:About/

},

{

path:'/home',

element:Home/,

children:[

{

path:'news',

element:News/

},

{

path:'message',

element:Message/

}

]

},

{

path:'/',

element:Navigateto="/about"/

}

importReactfrom'react'

import{NavLink,useRoutes}from'react-router-dom'

importroutesfrom'./routes'

exportdefaultfunctionApp(){

//根据路由表生成对应的路由规则

constelement=useRoutes(routes)

return(

div

divclassName="row"

divclassName="col-xs-2col-xs-offset-2"

divclassName="list-group"

{/*路由链接*/}

NavLinkclassName="list-group-item"to="/about"About/NavLink

NavLinkclassName="list-group-item"to="/home"Home/NavLink

/div

/div

divclassName="col-xs-6"

divclassName="panel"

divclassName="panel-body"

{/*注册路由*/}

{element}

/div

/div

/div

/div

/div

)

importReactfrom'react'

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

exportdefaultfunctionHome(){

return(

div

h2Home组件内容/h2

div

ulclassName="navnav-tabs"

li

NavLinkclassName="list-group-item"to="news"News/NavLink

/li

li

NavLinkclassName="list-group-item"to="message"Message/NavLink

/li

/ul

{/*指定路由组件呈现的位置*/}

Outlet/

/div

/div

)

}

路由的params参数

useParams()

作用：返回当前匹配路由的params参数，类似于5.x中的match.params。

importReact,{useState}from'react'

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

exportdefaultfunctionMessage(){

const[messages]=useState([

{id:'001',title:'消息1',content:'锄禾日当午'},

{id:'002',title:'消息2',content:'汗滴禾下土'},

{id:'003',title:'消息3',content:'谁知盘中餐'},

{id:'004',title:'消息4',content:'粒粒皆辛苦'}

])

return(

div

ul

{

messages.map((m)={

return(

//路由链接

likey={m.id}

Linkto={`detail/${m.id}/${m.title}/${m.content}`}{m.title}/Link

/li

)

})

}

/ul

hr/

{/*指定路由组件的展示位置*/}

Outlet/

/div

)

importReactfrom'react'

import{useParams,useMatch}from'react-router-dom'

exportdefaultfunctionDetail(){

const{id,title,content}=useParams()

//constx=useMatch('/home/message/detail/:id/:title/:content')

//console.log(x)

return(

ul

li消息编号：{id}/li

li消息标题：{title}/li

li消息内容：{content}/li

/ul

)

exportdefault[

{

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:Navigateto="/about"/

}

]

路由的search参数

useSearchParams()

作用：用于读取和修改当前位置的URL中的查询字符串。

返回一个包含两个值的数组，内容分别为：当前的seaech参数、更新search的函数。

useLocation()

作用：获取当前location信息，对标5.x中的路由组件的location属性。

exportdefault[

{

path:'/about',

element:About/

},

{

path:'/home',

element:Home/,

children:[

{

path:'news',

element:News/

},

{

path:'message',

element:Message/,

children:[

{

path:'detail',

element:Detail/

}

]

}

]

},

{

path:'/',

element:Navigateto="/about"/

}

importReact,{useState}from'react'

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

exportdefaultfunctionMessage(){

const[messages]=useState([

{id:'001',title:'消息1',content:'锄禾日当午'},

{id:'002',title:'消息2',content:'汗滴禾下土'},

{id:'003',title:'消息3',content:'谁知盘中餐'},

{id:'004',title:'消息4',content:'粒粒皆辛苦'}

])

return(

div

ul

{

messages.map((m)={

return(

//路由链接

likey={m.id}

Linkto={`detailid=${m.id}title=${m.title}content=${m.content}`}{m.title}/Link

/li

)

})

}

/ul

hr/

{/*指定路由组件的展示位置*/}

Outlet/

/div

)

importReactfrom'react'

import{useSearchParams,useLocation}from'react-router-dom'

exportdefaultfunctionDetail(){

const[search,setSearch]=useSearchParams()

constid=search.get('id')

consttitle=search.get('title')

constcontent=search.get('content')

constx=useLocation()

console.log('@',x)

return(

ul

li

button()=setSearch('id=008title=哈哈content=嘻嘻')}点我更新一下收到的search参数/button

/li

li消息编号：{id}/li

li消息标题：{title}/li

li消息内容：{content}/li

/ul

)

}

路由的state参数

useLocation()

作用：获取当前location信息，对标5.x中的路由组件的location属性。

exportdefaultfunctionMessage(){

const[messages]=useState([

{id:'001',title:'消息1',content:'锄禾日当午'},

{id:'002',title:'消息2',content:'汗滴禾下土'},

{id:'003',title:'消息3',content:'谁知盘中餐'},

{id:'004',title:'消息4',content:'粒粒皆辛苦'}

])

return(

div

ul

{

messages.map((m)={

return(

//路由链接

likey={m.id}

Link

to="detail"

state={{