react 路由

一.路由安装

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则中断跳转