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(
,
document.getElementById('root')
)
一级路由
-
v6版本中移出了先前的
-
-
-
-
当URL发生变化时，
-
useRoutes()配置 “路由表” ，但需要通过
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 (
{/* 路由链接 */}
About
Home
{/* 注册路由 */}
}/>
}/>
)
}
重定向
-
作用：只要
-
replace属性用于控制跳转模式（push 或 replace，默认是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 (
{/* 路由链接 */}
About
Home
{/* 注册路由 */}
}/>
}/>
)
}
-----------------------
import React,{useState} from 'react'
import {Navigate} from 'react-router-dom'
export default function Home() {
const [sum,setSum] = useState(1)
return (
我是Home的内容
{sum === 2 ? : 当前sum的值是：{sum}
}
)
}
NavLink高亮
-
作用: 与
组件类似，且可实现导航的“高亮”效果。 -
示例代码：
// 注意: NavLink默认类名是active，下面是指定自定义的class //自定义样式{ console.log('home', isActive) return isActive ? 'base one' : 'base' }} >login /* 默认情况下，当Home的子组件匹配成功，Home的导航也会高亮， 当NavLink上添加了end属性后，若Home的子组件匹配成功，则Home的导航没有高亮效果。 */home
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 (
{/* 路由链接 */}
About
Home
{/* 注册路由 */}
}/>
}/>
)
}
useRoutes路由表----嵌套路由
useRoutes()
- 作用：根据路由表，动态创建
- 当
routers/index.js
export default [
{
path:'/about',
element:About
Home
{/* 注册路由 */}
{element}
)
}
---
import React from 'react'
import {NavLink,Outlet} from 'react-router-dom'
export default function Home() {
return (
Home组件内容
-
News
-
Message
{/* 指定路由组件呈现的位置 */}
路由的params参数
useParams()
- 作用：返回当前匹配路由的
params参数，类似于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:'锄禾日当午'},
{id:'002',title:'消息2',content:'汗滴禾下土'},
{id:'003',title:'消息3',content:'谁知盘中餐'},
{id:'004',title:'消息4',content:'粒粒皆辛苦'}
])
return (
{
messages.map((m)=>{
return (
// 路由链接
-
{m.title}
)
})
}
{/* 指定路由组件的展示位置 */}
- 消息编号：{id}
- 消息标题：{title}
- 消息内容：{content}
)
}
----
export default [
{
path:'/about',
element:路由的search参数
useSearchParams()
-
作用：用于读取和修改当前位置的 URL 中的查询字符串。
-
返回一个包含两个值的数组，内容分别为：当前的seaech参数、更新search的函数。
useLocation()
- 作用：获取当前 location 信息，对标5.x中的路由组件的
location属性。
export default [
{
path:'/about',
element:
{
messages.map((m)=>{
return (
// 路由链接
-
{m.title}
)
})
}
{/* 指定路由组件的展示位置 */}
-
- 消息编号：{id}
- 消息标题：{title}
- 消息内容：{content}
)
}
路由的state参数
useLocation()
- 作用：获取当前 location 信息，对标5.x中的路由组件的
location属性。
export default function Message() {
const [messages] = useState([
{id:'001',title:'消息1',content:'锄禾日当午'},
{id:'002',title:'消息2',content:'汗滴禾下土'},
{id:'003',title:'消息3',content:'谁知盘中餐'},
{id:'004',title:'消息4',content:'粒粒皆辛苦'}
])
return (
{
messages.map((m)=>{
return (
// 路由链接
-
{m.title}
)
})
}
{/* 指定路由组件的展示位置 */}
- 消息编号：{id}
- 消息标题：{title}
- 消息内容：{content}
)
}
编程式路由导航
useNavigate()
-
作用：返回一个函数用来实现编程式导航。
-
示例代码：
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} }) //第二种使用方式：传入数值进行前进或后退，类似于5.x中的 history.go()方法 navigate(-1) } return () }
useMatch()
- 作用：返回当前匹配信息，对标5.x中的路由组件的
match属性。
useInRouterContext()
- 作用：如果组件在
useInRouterContext钩子返回 true，否则返回 false。
useNavigationType()
- 作用：返回当前的导航类型（用户是如何来到当前页面的）。
- 返回值：
POP、PUSH、REPLACE。 - 备注：
POP是指在浏览器中直接打开了这个路由组件（刷新页面）。
useOutlet()
-
作用：用来呈现当前组件中渲染的嵌 套路由。
-
示例代码：
const result = useOutlet() console.log(result) // 如果嵌套路由没有挂载,则result为null // 如果嵌套路由已经挂载,则展示嵌套的路由对象
useResolvedPath()
- 作用：给定一个 URL值，解析其中的：path、search、hash值。