【React】路由

npm i react-router-dom

• 6版本推荐使用函数组件（Hooks)
• 如果请求的路由不存在，则会返回index.html文件
• 子级路由不用都写全，注意/和./的使用，./可以简写（不写）

标签

• BrowserRouter：管理所有路由，套在最外面

  • 路由只能被一个BrowserRouter包裹(套在全局)
  • hashRouter(锚点路由)，#后的内容不会传给服务器

  <BrowserRouter>
    <App />
  </BrowserRouter>
  

• Link：用于路由跳转（是a标签）属性to是路由地址

  <Link to="about">About</Link>
  

• NavLink：路由跳转可以设置样式

  • NavLink的className还可以接收函数
    • 参数：{isActive: true}，判断当前链接是否被点击
    • 通过对象解构，利用三元表达式进行class的切换

<NavLink className={({isActive})=>isActive?‘active’:‘noActive’} to=“about” >about

- Routes：匹配第一个，并且必须包裹Route（如果使用路由表则不需要用这个标签）

- Route：用于路由的注册（如果使用路由表则不需要用这个标签）

- path和to要对应
- 默认不区分大小写，`caseSensitive`

```react
<Route path="/about" element={<About/>}

• Navigate：设置兜底路由

  <Route path="/" element={<Navigate to="/about"/>}
  //如果路由为空,则跳转到about
  

• Outlet：嵌套路由显示的位置（配合路由表）

Hooks

useRoutes（路由表）

• 参数必须为数组
• 嵌套路由设置children
• 需要配合Navigate标签，设置兜底路由
• routes放置的位置决定路由的显示
• 嵌套路由显示需要配合Outlet标签

//routes放置位置决定路由的显示
let routes = useRoutes([//参数必须为数组，这里只是用于演示，实际开发需要独立成模块
    {
        path: 'about',
        element: <About />,
        children:[
            {
                path:'news',
                element:<News/>
            }
        ]
    },{
        path: '/hello',
        element: <Hello />
    }, {
        path: '/',
        element: <Navigate to="hello" />
    }
])

//主路由
{routes}

//嵌套路由
<Outlet/>

useNavgiate（手动跳转）

• params或search参数正常写就行
• 可以携带state参数
• 所有组件都可以用useNavigate()来跳转

const navigate=useNavigate()

navgate('about',{//注意这里是配置对象
	replace:false,//一般不写
	state:{
        id:'bob',
        age:34
    }
})

navigate(-1)//模仿forward()

• useInRouterContext()：判断当前组件是否被路由包裹
• useOutlet()：展示当前组件中渲染的嵌套的路由
• useNavigationType()：返回用户是如何来到当前页面的（pop（刷新页面）| push | replace)
• useResolvedPath()：解析URL

路由传参

• 路由组件和一般组件是有区别的，能接收的参数不一样

• 使用useRoutes注册了的才是路由组件

• 关于刷新：

  • 刷新之后，仍然能获取参数，因为BrowserRouter在维护历史记录，除非手动清空记录或缓存
  • 但是hashRouter刷新后会导致state参数丢失

• 传参的方式有三种：

  • params：使用useParams接收
  • search：使用useSearchParams接收
  • state：使用useLocation接收

params

• useParams()返回的是对象
• 利用对象解构useParams()

useMatch()也能获取

<Link to='detail/tom/18'>detail</Link>

{
	path: 'detail/:id/:age',
	element: <Detail />
}

let {id,age}=useParams()

search(query传参)

• useSearchParams()会自动解析，返回数组（类似useState，使用数组解构）
• 使用search.get()获取指定信息

useLocation()也能获取

<Link to='detail/?id=tom&age=18'>detail</Link>

路由表不用设置

let [search,setSearch]=useSearchParams()
let id=search.get("id")
let age=search.get("age")

state

• useLocation()返回对象，具体信息在state对象中
• 使用对象解构获取state对象

obj={ //只是为了演示需要传递一个对象，实际最好写在一起
	id:"tom",
	age:18
}
<Link to="detail" state={obj} >detail</Link>

路由表不用设置

let {state}=useLocation()

<h3>{state.id}</h3>
<h3>{state.age}</h3>

懒加载

默认会加载全部组件，使用懒加载按需加载

import React,{Component,lazy,Suspense} from 'react'
const Home=lazy(()=>import('./Home'))

必须用Suspense包裹路由组件，设置加载过程

<Suspense fallback={<Loading/>}>//    
	<Route path="/home" element={<About/>}/>
</Suspense>