react-router-dom
yarn add react-router-dom@5
Link
标签包裹Home
Route
标签进行匹配
最外侧包裹一个
或者
components
文件夹pages
文件夹中,props
不同:
history:
go: ƒ go(n)
goBack: ƒ goBack()
goForward: ƒ goForward()
push: ƒ push(path, state)
replace: ƒ replace(path, state)
location:
pathname: "/home"
search: ""
state: undefined
match:
params: {}
path: "/home"
url: "/home"
NavLink
与封装NavLink
NavLink
可以实现路由链接的高亮,通过activeClassName
指定样式名this.props.children
可以获取标签体内容Switch
的使用publick/index.html
中,引入样式时不写./
写/
(常用)publick/index.html
中,引入样式时不写./
写%PUBLIC_URL%
(常用)HashRouter
publick/index.html
返回exact
Redirect
的使用
{/* 写在最底部,重定向, 路由都匹配不上,就去 to ... */}
path
值params
参数{item.title}
const {id, title} = this.props.match.params
search
参数{item.title}
// search 接收参数 react自动安装的库
import qs from 'querystring'
const {search} = this.props.location
const {id, title} = qs.parse(search.slice(1))
search
是urlencoded
编码,需要借助querystring
解析{item.title}
// state参数无需声明接收,正常注册路由即可
const {id, title} = this.props.match.state
push
与replace
replace
属性,将不会再进行压栈,浏览器不会有回退记录Message
借助this.props.history
对象上的API
对操作路由跳转、前进、后退
this.props.history.push()
this.props.history.replace()
this.props.history.goBack()
this.props.history.goForward()
this.props.history.go()
withRouter
withRouter
可以加工一般组件,让一般组件具备路由组件所持有的API
withRouter
的返回值是一个新组件import { withRouter } from 'react-router-dom'
export default withRouter(Hearder)
BrowserRouter
和HashRouter
的区别BrowserRouter
使用的使H5
的history
的API
,不兼容IE9
及以下版本,HashRouter
使用的使URL
的哈希值BrowserRouter
的路径中间没有#,例如:localhost:3000/demo/test
HashRouter
的路径包含#,例如:localhost:3000/#/demo/test
state
参数的影响BrowserRouter
没有影响,因为state
保存在history
对象中HashRouter
刷新后会导致路由state
参数丢失HashRouter
可以用于解决一些路径错误相关的问题react Router
三个不同的包发布在npm
上:它们分别是:
react-router
: 路由的核心库,提供很多的:组件,钩子react-router-dom
: 包含react-router
所以内容,并添加一些专门用于DOM
组件。例如
等react-router-native
: 包含react-router
所以内容,并添加一些专门用于ReactNative
的API
。例如
等React Router 5.x
版本相比,改变了什么?
,新增
等component={About}
变为elemet={ }
等hook
:useParams
、useNavigate
、useMatch
等Component
和
v6
版本中移除了
,引入了新的替代者:
和
要配合使用,且必须要用
包裹
相当于一个if
语句,如果其路径与当前URL
匹配,则呈现其对应的组件
属性用于指定:匹配时是否区分大小写(默认为fasle
)URL
发生变化时,
都会查看其所有子
元素以找到最佳匹配并呈现组件
也可以嵌套使用,且配合useRoutes()
配置"路由表",但需要通过
组件来渲染其子路由(见
说明) // 路由表
const element = useRoutes({
path: '/home',
element:
},
{
path: '/about',
element: ,
children: [
{
path: 'news',
element: ,
},
{
path: 'message',
element: ,
children: [
{
path: 'detail',
element:
}
]
}
]
},
{
path: '/',
element:
}
])
return (
<>
{/* 1. 在react中靠路由实现切换组件--编写路由链接 */}
Home
About
{/* 2. 注册路由 */}
{/* Routes注册*/}
{/*
} />
} />
}/>
*/}
{/* 路由表注册*/}
{element}
>
)
URL
,且不发送网络请求(路由链接)
和
包裹
组件类似,且可实现导航的高亮效果
组件被渲染,就会修改路径,切换视图replace
属性用于控制跳转模式,(push
或replace
,默认是push
)import {useState} from 'react'
import {Navigate} from 'react-router-dom'
export default function Home() {
const [num, setNum] = useState(1)
return (
<>
{num === 2
?
: num的值是{num}
}
>
)
}
产生嵌套是,渲染其对应的后续子路由
-
{/*
News */}
{/* News */}
News
-
Message
{/* 指定路由组件呈现的位置(二级+路由) */}
HOOKS
useRoutes()
和
useNavigate()
import { useNavigate } from 'react-router-dom'
export default function Hearder() {
const navigate = useNavigate()
const back = () => {
navigate(-1)
}
const forward = () => {
navigate(1)
}
const handleClick = () => {
navigate('detail',{
replace: false,
state: {
id: '122',
title: '小明',
content: '热爱祖国'
}
})
}
return (
<>
>
)
}
useParams()
params
参数useSearchParams()
search
参数、更新search
的函数useLocation()
location
信息,对标5.x中的路由组件的localtion
属性(可用于获取state
参数)useMatch()
match
属性useInRouterContext()
(APP.jsx)
的上下文中呈现(被路由包裹的组件),则useRouterContext
钩子返回true
,否则false
useNavigationType()
(News.jsx)POP
,PUSH
,REPLACE
POP
是指在浏览器中直接打开了这个路由组件(刷新页面)useOutlet()
(About.jsx)const a = useOutlet()
console.log(a, 'useOutlet嵌套')
// 如果嵌套路由没有挂载,则a为null
// 如果嵌套路由已经挂载,则展示嵌套路由对象
useResolvedPath()
(News.jsx)URL
值,解析其中的:path
、search
、hash
值