react路由传参

一.安装路由

1.运行npm       安装 npm  i   react-router-dom   -S

2.创建 pages文件夹   建立About.js 文件    Home.js文件

3.创建路由   router文件夹

二.路由配置

src/router/index.jsx

const routes = [
{path:"/",element:<HomeView/>},
{path:"/about",element:<AboutView/>}
]

创建并返回路由

src/router/index.jsx
export default function RouterView(){
    const elem = useRoutes(routes)//路由配置
   return elem
}

 使用并切换路由
App.jsx
<HashRouter>
    <NavLink to="/">首页</NavLink>
    <NavLink to="/about">关于</NavLink>
     <RouterView />
</HashRouter>

App.js 内容

import { HashRoutes as Router} from " react-router-dome"
import RouterView from "./router"
<Router><RouterView></Router>

三.路由组件与方法

1. 组件

<HashRouter> 哈希路由
<BrowserRouter> 浏览器路由
<NavLink> 导航链接 
选中会有active  类名
<Link>导航链接
<OutLet>子路由容器

2. 方法

useRoutes使用路由配置
useParams() 路由参数
useSearchParams() 获取查询参数

四.导航链接   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则中断跳转

五.路由查询参数

<NavLink to="/about?redirect=hello"

在About.jsx
const [searchParams] = useSearchParams();
const redirect = searchParams.get("reidrect")

子路由
router/index.jsx
{path:"/admin",element:<AdminView/> ,children:
    [{path:"",element:<DashView/>},
      {path:"orderlist",element:<OrderList/>}
   ]
}

views/admin/adminView.jsx
<Link to="">概览</Link> |  <Link to="orderlist">订单</Link> |
<Outlet/>

六.404页面

配置在最后面

{path:"*",element:<div>404</div>}