Umi3 创建,配置环境,路由传参(代码示例)

这篇具有很好参考价值的文章主要介绍了Umi3 创建,配置环境,路由传参(代码示例)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

创建项目

配置环境

创建脚手架

项目结构及其目录、

路由

配置路由

嵌套路由

编程式导航和声明式导航

声明式导航

编程式导航

约定式路由

路由传参

query传参(问号)

接收参数

params传参(动态传参)

接收参数


创建项目

配置环境

首先得有 node,并确保 node 版本是 10.13 或以上。(18版本可能会不适配)

$ node -v  //查看版本
v16.20.2

如果出现版本错误,可以使用nvm进行node版本管理https://blog.csdn.net/kkkys_kkk/article/details/135071784?spm=1001.2014.3001.5501

推荐使用 yarn 管理 npm 依赖,并使用国内源(阿里用户使用内网源)。

# 国内源
$ npm i yarn tyarn -g
# 后面文档里的 yarn 换成 tyarn
$ tyarn -v

# 阿里内网源
$ tnpm i yarn @ali/yarn -g
# 后面文档里的 yarn 换成 ayarn
$ ayarn -v

创建脚手架

 创建项目文件夹

$ mkdir myapp && cd myapp

通过官方工具创建项目,

$ yarn create @umijs/umi-app
# 或 npx @umijs/create-umi-app

Copy:  .editorconfig
Write: .gitignore
Copy:  .prettierignore
Copy:  .prettierrc
Write: .umirc.ts
Copy:  mock/.gitkeep
Write: package.json
Copy:  README.md
Copy:  src/pages/index.less
Copy:  src/pages/index.tsx
Copy:  tsconfig.json
Copy:  typings.d.ts

安装依赖

$ yarn
或者
$ npm i

启动项目

$ yarn start
或者
$ npm start

在浏览器里打开 http://localhost:8000/,能看到以下界面

Umi3 创建,配置环境,路由传参(代码示例),javascript,typescript,react.js,前端框架,webpack

项目结构及其目录、


├── package.json   项目基本信息 、依赖信息
├── tsconfig.json  ts的配置文件
├── typings.d.ts   ts的类型声明文件(凡是以xxx.d.ts结尾的文件都是咱们的ts类型声明文件)
├── .umirc.ts      核心配置文件
├── .env           环境参数文件
├── mock           mock数据
├── src
		├── .umi       编译后自动生成的文件,不需要动
		├── pages               业务组件文件夹(页面)
		├── index.less
		└── index.tsx       业务组件

路由

umi的路由分为配置路由与约定路由

配置路由

在`pages`中新建一个页面

export default function Home() {
  return (
  <div>Home</div>
  )
}

在.umirc.ts中的routes配置项中新增路由配置

import { defineConfig } from 'umi';
export default defineConfig({
  nodeModulesTransform: {
  	type: 'none',
  },
  routes: [
  	{
      path: '/home',
      component: '@/pages/Home'
    },
    {
      path: '/course',
      component: '@/pages/Course'
    }
  ],
  fastRefresh: {},
});

umi官方推荐我们使用config方法

在项目文件下创建config文件夹,复制umirc.ts内容,同时删除umirc.ts文件,因为umirc.ts的权重高

Umi3 创建,配置环境,路由传参(代码示例),javascript,typescript,react.js,前端框架,webpack

创建config文件,粘贴umirc.ts,将routes作为文件导入引入

import { defineConfig } from 'umi';
import routes from './router/index';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  
  fastRefresh: {},
  routes
});

创建路由文件,声明路由,导出

const routes=[
  	{
      path: '/home',
      component: '@/pages/Home'
    },
    {
      path: '/course',
      component: '@/pages/Course'
    }
  ],
export default routes
嵌套路由

嵌套路由是通过`routes`属性来实现的

 const routes=[

{
        path:'/index',
        component:'@/pages/Base/Base',
        routes:[
            {
                path:'one',
                component:'@/pages/One/One'
            },
            {path:'two',component:'@/pages/Two/Two'},
            {path:'three',component:'@/pages/Three/Three'},
        ]
    },
]

然后在组件中通过props.children来渲染子路由

import React from 'react';
import styles from './index.less';

export default (props:any) => {
  return (
    <div className={ styles['container'] }>
      { props.children }
    </div>
  )
}
编程式导航和声明式导航
声明式导航
import React from 'react';
import styles from './index.less';
import { NavLink } from 'umi';

// 通过接口定义props类型
interface Props {
  children: React.ReactNode
}
// 在umijs中,Props类型的定义一般会用到React.FC类型,FunctionComponent类型
// 在React.FC类型中,Props类型是一个泛型,用来定义组件所接收的Props类型
const Course:React.FC<Props> = (props) => {
  return (
    <div className={ styles['container'] }>
      {/* v5版本的路由是一样的 */}
      <NavLink to="/course" activeClassName="active">去课程</NavLink>
      Course <br />
      { props.children }
    </div>
  )
}

export default Course;
编程式导航

编程式导航是通过: history.push 方法来实现的

import styles  from './index.less';
import { NavLink, history } from 'umi';

export default function Home() {
  return (
    <div className={ styles['container'] }>
      Pages Home
      {/* 声明式导航 */}
      <NavLink to="/course" activeClassName="active">去课程</NavLink>
      {/* 编程式导航 */}
      <button onClick={ () => history.push('/course') }>去课程</button>
    </div>
  )
}

约定式路由

如果没有routes 配置 , Umi 会进入约定式路由模式, 然后分析src/pages 目录拿到路由配置。 比如以下文件结构:

└── pages
	├── index.tsx
  └── users.tsx

会得到以下路由配置

[
  { exact: true, path: '/', component: '@/pages/index' },
	{ exact: true, path: '/users', component: '@/pages/users' }
]

路由传参

query传参(问号)

写入路径中

history.push('/list?id=1');

以对象形式

history.push({
  pathname: '/list',
  query: {
    name: 'b',
  },
});
接收参数

使用history方法

import {history } from 'umi'

生成变量接收参数

 const id =history.location.search.split('=')[1]

 或者使用useLocation函数,返回表示当前 URL 的对象。您可以将其视为每当 URL 更改时返回新位置。

import { useLocation } from 'umi';

export default () => {
  const location = useLocation();
  return (
    <div>
      <ul>
        <li>location: {location.pathname}</li>
      </ul>
    </div>
  );
};
params传参(动态传参)

路由表配置改为动态

  {
        path:'/anthor/:id',
        component:'@/pages/detail/Id'
    },
    

同样使用history方法

  <button onClick={()=>{history.push('/anthor/1')}}>click me</button>

将需要传递的参数直接写入路径当中

接收参数

useParams返回 URL 参数的键/值对的对象。使用它来访问当前路由

import { useParams } from 'umi';

export default () => {
  const params = useParams();
  return (
    <div>
      <ul>
        <li>params: {JSON.stringify(params)}</li>
      </ul>
    </div>
  );
};

返回的是包含数据信息的对象文章来源地址https://www.toymoban.com/news/detail-803163.html

到了这里,关于Umi3 创建,配置环境,路由传参(代码示例)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • umi 中的路由切换动画如何实现

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 环境准备 1.1 在src文件目录下创建一个 layouts文件夹,在文件夹里创建两个文件。 1.2 在index.tsx文件中复制如下代码: 1.3 在index.less文件中复制如下代码: 1.4 .umirc.ts文件中的配置 要让layouts文件作为一级

    2024年02月09日
    浏览(49)
  • Vagrant创建Oracle RAC环境示例

    利用Vagrant安装Oracle RAC(默认为non-CDB模式),生成2台虚机,耗时约 1小时 。 可以看到vagrant生成了node1和node2两台虚机: 两台虚机启动后,32G的电脑内存占用由29%升至69%,消耗内存约 13G 。 空间方面,两台虚机刚生成时,新增空间占用为vagrant目录下的113G(共享存储)加虚机目

    2024年01月21日
    浏览(47)
  • 配置策略路由(基于IP地址)示例

    定义 策略路由PBR(Policy-Based Routing)是一种依据用户制定的策略进行路由选择的机制,其优先级高于直连路由、静态路由和通过动态路由协议生成的路由。设备配置策略路由后,若接收的报文(包括二层报文)匹配策略路由的规则,则按照规则转发;若匹配失败,则根据目的

    2024年02月04日
    浏览(49)
  • redis哈希分桶路由介绍及代码示例

    先举例来解释哈希表在 Redis 中的应用: 假设我们有一个存储用户信息的场景,我们想要存储每个用户的姓名、年龄和电子邮箱地址。在传统的键值对方式中,我们可能会这样存储: 这种方式下,每个用户的信息都需要使用不同的键来存储,不够直观,也不易于管理。而使用

    2024年04月12日
    浏览(38)
  • 从创建文件开始,使用git clone方式把代码上传到服务器上,并配置好环境(Pycharm远程连接服务器来跑代码第二种方式)

    本文是在这篇[关于git clone http://xxxxxxxxxxx报错的问题]基础上,扩展把代码放到服务器上运行 想知道为什么使用git clone报错的同学可以去瞅瞅 以下工作都是建立在创建好虚拟环境的基础上 创建虚拟环境直接使用 具体文章以前也写过了点我传送 首先要准备一个文件夹,专门用

    2024年02月03日
    浏览(72)
  • RIP路由协议简介+基本配置示例

            RIP(Routing Information Protocol)-路由信息协议: 是一种基于距离矢量(Distance Vector)算法的协议,以跳数(被传送数据所经过路由器的个数)为度量来衡量到达目标网络的距离,属于IGP(内部网关协议)协议,有RIP1和RIP2两个版本,基于UDP协议,端口号为520,主要用于

    2024年02月15日
    浏览(41)
  • react--umi, 根据权限展示菜单,完成页面权限分配,以及路由鉴权

           umi框架,prolayout布局,access设置菜单权限,initialState全局初始化数据,配合使用,根据后端返回的权限信息,完成菜单的不同的权限的不同展示。     1. umi 配合 patlayout 布局, 实现根据配置的路由展示菜单栏     2. umi 的 access 插件,设置不同权限的菜单展示    

    2024年02月06日
    浏览(91)
  • ant design pro + umi4的动态菜单与动态路由

    困扰我好多天的自定义菜单及路由终于完成了,首先虽然看似为一个功能,但在umi4中是两项配置。 先说说我浪费了大量时间使用的处理方式:因为曾经的项目是umi3的,所以我就想原样搬过来,结果发现,布局页BasicLayout的子children不见了!     如果这个子路由能正常显示,

    2024年02月11日
    浏览(42)
  • umi 如何使用 proxy 代理解决 开发环境跨域 问题

    由于浏览器的同源策略限制,当一个请求 URL 的协议、域名、端口和当前页面 URL 任意一个不一致时都会出现跨域错误。 eg: 用 node run了一个 http://localhost:8080 的服务,在这个服务器下访问的网页也默认在 http://localhost:8080 这个域下面; 假设服务端所在的域是 http://example.com 这

    2024年02月09日
    浏览(41)
  • 使用Flask Web创建一个调用ChatGPT API的网页--简单示例(linux环境下)

    前提:你应该要有一个能正常使用chatGPT的openAI账号;即你已经成功注册了chatGPT,并能正常使用。 下面是一个使用Flask Web框架创建调用ChatGPT API的网页的示例代码和工程结构: 具体的工程,你可以选择自己创建,也可以直接下载我创建好的工程,链接如下: https://download.csd

    2024年02月13日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包