umi,从url中获得search参数方法

1. 路由传参(新增时不带ID,search或者 query)

 history.push({
              pathname: 'addSelf',
              query: {
                self: 'yes',
              }
            });

 2. 从url中取参数

import { history,useLocation } from 'umi';

// 从路由中取到search片段
const {search}= useLocation()

 3. 解构得到参数 (两种方法)

   第一种:

    第二种:

  const {search}= useLocation()

  // 操作search片段,取到参数

   let searchParams=new URLSearchParams(search)

   const self =searchParams.get("self")

 // 再挂载时去获取search 参数进行一些操作

  const [isSelf,setIsSelf] = useState(true)

  useEffect(()=>{
     self === "yes" ? setIsSelf(true) : setIsSelf(false)
  })

### Umi框架配置方法参数说明 #### 1. 插件化体系与基础配置 Umi作为一个企业级React框架,采用插件化的体系结构来增强其灵活性和功能性。通过简单的命令行工具即可快速搭建环境并运行项目[^2]。 ```bash mkdir demo && cd demo npm init -y npm install umi npx umi g page index npx umi dev ``` #### 2. 约定式路由配置 为了简化开发者的工作流程,Umi引入了约定式路由的概念。在这种模式下,只需要按照特定的文件夹结构放置页面组件,Umi会自动解析这些路径作为应用中的路由规则而无需手动编写复杂的路由表单[^3]。 例如,在`src/pages/`目录下的每一个`.js`或`.jsx`文件都会被识别成独立的一条访问路径: - `src/pages/home/index.jsx` 对应 `/home` - `src/pages/user/profile.jsx` 对应 `/user/profile` 这种设计不仅提高了编码效率还加强了一致性和维护性[^4]。 #### 3. 配置式路由设置 除了上述提到的基于文件系统的简单映射外,Umi同样允许更精细控制的应用场景——即所谓的“配置式”路由定义方式。这种方式提供了更大的自由度去定制URL模式、重定向逻辑以及懒加载等功能特性。 可以在项目的根目录找到名为`config/config.js` (或 `.ts`) 文件用于声明全局性的选项: ```javascript export default { routes: [ { path: '/', component: 'Home' }, { path: '/users', component: './Users', routes:[ {path:'/detail/:id',component:'./UserDetail'} ] } ], }; ``` 此处展示了如何利用嵌套数组的形式构建父子关系明确的多层导航菜单,并且支持动态参数传递给子项以实现个性化展示需求。 #### 4. 使用内置Hooks进行状态管理 当涉及到跨多个组件共享数据或者监听当前所在位置变化等情况时,Umi提供了一系列专门为此目的打造的钩子函数(Hooks),比如`useHistory()`, `useParams()`等,它们可以直接像普通的React Hooks一样调用来获取所需的信息[^5]。 ```javascript import { useHistory } from "umi"; function MyComponent(){ const history = useHistory(); function handleClick(){ history.push({ pathname:"/", search:"?q=abc" }); } return ( <button onClick={handleClick}>Go Home</button> ); } ``` 以上代码片段示范了一个按钮点击事件触发后的页面跳转操作,其中包含了查询字符串(`search`)部分的内容设定。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值