react-router|青训营笔记

RunningLiLi
90 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的的第2天

基本格式

BrowserRouter,HashRouter,Link, Route, Routes

import {...} from 'react-router-dom' <BrowserRouter><App></App></BrowserRouter>渲染时用BrowserRouter或HashRouter包裹App

                <Link to='/b'>BBBBBBBB</Link>
                <Link to='/a'>AAAAAAA</Link>
                <Routes> 
                    <Route path='/b' element={<B></B>} />
                    <Route path='/a' element={<A></A>} />
                </Routes>

Link用来更改路由，Route必须放在Routes里面，Route

NavLink

react-router6<NavLink activeClassName={({isActive})=>isActive?'baseclass activeclss':'baseclass'}} to='xxx'>xxxx</NavLink>

react-router5<NavLink activeClassName='xx' to='xxx'>xxxx</NavLink>路由匹配时添加xx类名

可以封装MyNavLink组件组件内部使用NavLink并可以通过传props或者标签题决定NavLink的属性（标签体内容就是一个名为children的属性）（批量将对象的key value添加到标签做属性可以使用{...obj}）

image.png

image.png

Switch||Routes

<Swich> <Swith>只显示匹配到的第一个路由

    <Switch>
          <Route  exact path="/" component={Main}></Route>
          <Route  path="/about" component={About}></Route>
          <Route  path="/topic" component={Topic}></Route>
     </Switch>

react-router6用<Routes></Routes>代替（cassSensitive属性区分大小写 ）

    <Routes>
          <Route  exact path="/" element={<Main/>}></Route>
          <Route  path="/about" element={<About/>}></Route>
          <Route  path="/topic" element={<Topic/>}></Route>
    </Routes>

Redirect|| Navigate

react-route5<Redirect to="/about"> 都不能匹配时决定
react-route6<Route path="/" element={<Navigate to="/about">}> 只要Navigage一渲染就切换视图（可以给replace属性）

嵌套路由

<Route path='/home' componet={Home}>
在Home组件中
<Route path='/home/news' componet={news}>
因为模糊匹配的原因，所有就算是/home/news也可以匹配到Home组件（所以不要轻易给react属性）

路由组件传参

params

  1. 路由表需要参数路由路径后添加占位符

image.png

  1. <(Nav)Link>控制路由时路径后直接跟 /+参数

image.png

  1. 相应组件接受参数
  • 如果是class定义的组件通过this.props拿到

  • 如果是function定义的组件
import {useParams，useMatch} from 'react-router-dom'
const params=useParams()//params对象包含传入params参数
const match=useMatch('/home/message/detail/:id/:title/:content')//match对象包含传入params参数和pathname,pathnameBase,parttern

image.png

sreach

  1. 在<(Nav)Link>的to中传参

image.png

  1. 在组件中接收 import {useSearchParams，useLocation} from 'react-router-dom' const [search,setSearch]=useSearchParams() search.get('id')||search.get('title')||search.get('content')

其中setSearch是一个函数用来更新search参数 其中useLocation是一个函数返回location对象

image.png

state

  1. <(Nav)Link>中state属性传参

image.png

2.接受参数

import {useLocation} from 'react-router-dom' const {state:{id,title,content}}=useLocation()

image.png 注意同上的search参数的useLocation

路由表

一般配置在src/routes

export default [
{path:'/about',element:<About/>},
{path:'/home',element:<Home/>,children:[{path:"news",element=<news/>},{path:"mes",element:<mes/>}]},
{path:'/',element:<Navigate to='/about'/>}
]

在其他组件引入直接直接放到页面

import routes from "./routes"
import {useRoutes} from "react-router-dom"
...
const element=useRoutes(routes)
render(){
    return(
    <Navlink  end to='/home'/>//end属性 当子级路由匹配时，此路由不高亮
    ...
    {element}//在注册路由的位置显示路由组件
    ...
    )
}
...

在子路由中

import {Outlet,NavLink} from "react-router-dom"
...
render(){
   return(
   <NavLink to="news">News</Navlink>
   //注意to里面的路径不要加'/'或者写成'./news'
   ...
   <Outlet/>//匹配到的组件展示区
   ...
   )
}
...

编程式路由导航

  1. 引入useNavigate（函数）

  2. 调用const navigate=useNavigate（）（函数）

  3. 调用navigate即可切换

    1. navigate（"/about"）
    2. navigate（"detail"）(路由表的子路由)
    3. navigate（"xxx"，{ replace:false, state:{ id:m.id, title:m.title, content:m.content } }）
    4. navigate（number）1:前进 -1：后退

其他hooks

  • useNavigate (=>boolean)
    返回当前组件是否在路由组件的上下文中（即在BrowserRouter或HashRouter包裹中）

  • useNavigationType(=>pop||push||replace)
    返回是怎么来到路由组件的（如果刷新或者直接在路径添加则pop）

  • useOutlet(=>NUll||路由组件对象)
    如果使用useOutlet的嵌套路由还没有挂载则为null

  • useResolvedpath(url=>obj)
    解析url的path，search，hash

avatar
文章
阅读
粉丝