文章目录

• • @[TOC](文章目录)
• Router路由配置
• • 安装和封装
  • 使用
  • • 声明式导航Link和编程式导航useNavigate
  • 导航传参
  • • useSearchParams 接收传参
    • useParams 接收传参
  • 路由嵌套children和菜单式渲染
  • • 404路由配置
  • 路由模式
  • • history模式，无/#/ 需要后端支持
    • hash模式，有/#/ 无要后端支持
• 总结

Router路由配置

安装和封装

// 创建项目安装所有依赖
create-react-app react-router-pro
// 安装最新router
npm i react-router-dow

• 安装后在index.js跟文件导入
  
• 创建router/index.js文件
• 导出组件和封装的router
  

使用

声明式导航Link和编程式导航useNavigate

import { Link, useNavigate } from "react-router-dom";
/**
 * 声明式导航 Link to="/artice" 跳转到路由artice页面
 * 编程式导航 useNavigate() hooks 
*/
function Login() {
  var navigate = useNavigate()
  return (
    <div>
      Login
      <Link to="/artice">button</Link>
      <button onClick={()=>navigate("/artice")}>sssssss</button>
    </div>
  )
}

export default Login;

导航传参

useSearchParams 接收传参

• 使用useNavigate hooks传参
  
• useSearchParams接收参数，解构出params获取参数对象
  

useParams 接收传参

• 组件内使用useNavigate传参，路由加/参数拼接* 路由配置path用/:id声明参数名字
  
• 最后使用useParams接收参数，可解构出参数
  

路由嵌套children和菜单式渲染

• 使用Outlet渲染二级路由，Link当导航菜单
  
  *嵌套children
  

404路由配置

路由模式

history模式，无/#/ 需要后端支持

hash模式，有/#/ 无要后端支持

---

总结