一.路由安装
1.运行npm 安装 npm i react-router-dom -S
2.创建 pages文件夹 建立About.js 文件 Home.js文件
3.创建路由 router文件夹
二.路由配置
const baseRoutes=[
{path:' ',element:<home/>}
{path:' ',element:<home/>
children:[
"{path:' ',element:<Dash/>"
]}
]
创建并返回路由
const element =useRoutes(baseRoutes)
return <>{element}</>
App.js 内容
import { HashRoutes as Router} from " react-router-dome"
import RouterView from "./router"
<Router><RouterView></Router>
导航链接 Link 和 Navlink
两者都是跳转路由,NavLink的参数更多些
Link to: 有两种写法,表示跳转到哪个路由
字符串写法: <Link to="/a" />
对象写法: <Link to={{ pathname: '/courses', search: '?sort=name', hash: '#the-hash',
state: { fromDashboard: true } }}/>
replace:就是将push改成replace
innerRef:访问Link标签的dom
NavLink:
Link的所有参数
activeClassName: 路由激活的时候设置的类名 实现路由链接的高亮
activeStyle :路由激活设置的样式
exact: 参考Route,符合这个条件才会激活active类
strict: 参考Route,符合这个条件才会激活active类
isActive: 接收一个回调函数,active状态变化的时候回触发,返回false则中断跳转