React

文章目录

• • @[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 (
      
  
        Login
        button
        ()=navigate("/artice")}>sssssss
      
    )
  }
  export default Login;
  

  导航传参

  

  useSearchParams 接收传参

  • 使用useNavigate hooks传参

    

  • useSearchParams接收参数，解构出params获取参数对象

    

    useParams 接收传参

    • 组件内使用useNavigate传参，路由加/参数拼接* 路由配置path用/:id声明参数名字

      

    • 最后使用useParams接收参数，可解构出参数

      

      路由嵌套children和菜单式渲染

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

        

        *嵌套children

        

        404路由配置

        

        路由模式

        

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

        

        

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

        

        

        ---

        总结