{"id":339,"date":"2026-05-20T11:41:14","date_gmt":"2026-05-20T03:41:14","guid":{"rendered":"https:\/\/mitongxue.cn\/?p=339"},"modified":"2026-06-12T20:05:52","modified_gmt":"2026-06-12T12:05:52","slug":"umi%e6%90%ad%e5%bb%bareact%e5%90%8e%e7%ab%af%e7%b3%bb%e7%bb%9f","status":"publish","type":"post","link":"https:\/\/mitongxue.cn\/index.php\/2026\/05\/20\/umi%e6%90%ad%e5%bb%bareact%e5%90%8e%e7%ab%af%e7%b3%bb%e7%bb%9f\/","title":{"rendered":"umi\u642d\u5efaReact\u540e\u7aef\u7cfb\u7edf"},"content":{"rendered":"\n<ul class=\"wp-block-list\">\n<li><strong>\u4e09\u65b9UI\u5e93\u5730\u5740\uff1a<\/strong><a href=\"https:\/\/ant.design\/index-cn\">https:\/\/ant.design\/index-cn<\/a><\/li>\n\n\n\n<li><strong>umi\u6587\u6863\u5730\u5740\uff1a<\/strong><a href=\"https:\/\/umijs.org\/zh-CN\">https:\/\/umijs.org\/zh-CN<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u5b89\u88c5<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>pnpm dlx create-umi@latest\nnpm start<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u5728\u666e\u901a\u7684 Umi \u5e94\u7528\u4e2d\uff0c\u9ed8\u8ba4 <strong>\u4e0d\u9644\u5e26\u4efb\u4f55\u63d2\u4ef6<\/strong> \uff0c\u5982\u9700\u4f7f\u7528 Max \u7684\u529f\u80fd\uff08\u5982 \u6570\u636e\u6d41\u3001antd \u7b49\uff09\uff0c\u9700\u8981\u624b\u52a8\u5b89\u88c5\u63d2\u4ef6\u5e76\u5f00\u542f\u4ed6\u4eec\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>pnpm add -D @umijs\/plugins<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u5982\u5f00\u542f antd \u63d2\u4ef6\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ .umirc.ts\nexport default {\n \u00a0plugins: &#91;'@umijs\/plugins\/dist\/antd'],\n \u00a0antd: {}\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react';\nimport { Button, Flex } from 'antd';\nexport default function Test() {\n  return (\n    &lt;Flex gap=\"small\" wrap>\n        &lt;Button type=\"primary\">Primary Button&lt;\/Button>\n        &lt;Button>Default Button&lt;\/Button>\n        &lt;Button type=\"dashed\">Dashed Button&lt;\/Button>\n        &lt;Button type=\"text\">Text Button&lt;\/Button>\n        &lt;Button type=\"link\">Link Button&lt;\/Button>\n    &lt;\/Flex>\n  );\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">umi\u4e2d\u8def\u7531<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">1.umirc.ts\u5b9a\u4e49<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { defineConfig } from \"umi\";\nexport default defineConfig({\n  \/\/ routes: &#91;\n  \/\/ \u00a0 { path: \"\/\", component: \"index\" },\n  \/\/ \u00a0 { path: \"\/docs\", component: \"docs\" },\n  \/\/ ],\n  npmClient: 'pnpm',\n  utoopack: {},\n});<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">2.\u81ea\u52a8\u751f\u6210<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\u5c06routes\u6ce8\u91ca\u6389\uff0c\u8fd0\u884c\u4f1a\u9ed8\u8ba4\u751f\u6210.umi\/core\/route.tsx<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Layout\u548c\u8df3\u8f6c<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u8df3\u8f6c\u6709Link\u548c\u901a\u8fc7onClick\u7684history\u65b9\u5f0f<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Link, Outlet } from 'umi';\nimport styles from '.\/index.less';\nimport { Button } from 'antd';\nimport { history } from 'umi';\nexport default function Layout() {\n  const goto = (path) =>{\n    history.push(path);\n  };\n\n  return (\n    &lt;div className={styles.navs}>\n      &lt;Link to=\"\/\">Home&lt;\/Link>\n      &lt;Link to=\"\/dashboard\">Dashboard&lt;\/Link>\n      &lt;Link to=\"\/user\">User&lt;\/Link>\n      &lt;Link to=\"\/docs\">Docs&lt;\/Link>\n      &lt;Button type=\"primary\" onClick={() => goto('\/dashboard')}>ClickPrimary Button&lt;\/Button>\n      &lt;Outlet \/>\n    &lt;\/div>\n  );\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u522b\u540d\u5b9a\u4e49<\/h3>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">\u5012\u5165path\u6a21\u5757\uff0c\u6dfb\u52a0alias\u5c5e\u6027<\/p>\n<\/blockquote>\n\n\n\n<pre class=\"wp-block-code\"><code>const {resolve} = require('path'); &nbsp;<br>\u200b<br>alias: {<br> &nbsp; &nbsp;api: resolve(__dirname, '.\/src\/services\/'), <br> &nbsp; &nbsp;components: resolve(__dirname, '.\/src\/components'),<br> &nbsp; &nbsp;config: resolve(__dirname, '.\/src\/utils\/config'),<br> &nbsp; &nbsp;themes: resolve(__dirname, '.\/src\/themes'),<br> &nbsp; &nbsp;utils: resolve(__dirname, '.\/src\/utils'),<br>  }<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">layout\u9009\u62e9<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Link, Outlet } from 'umi';\nimport styles from '.\/index.less';\nimport { selectLayout } from 'utils\/selectLayout';\nimport BaseLayout from '.\/BaseLayout';\nimport LoginLayout from '.\/LoginLayout';\nimport { useLocation } from 'umi';\nexport default function Layout({ children }) {\n  const location = useLocation();\n  console.log(location,'location');\n  const layoutMap = {\n    BaseLayout,\n    LoginLayout,\n  }\n  const Container = layoutMap&#91;selectLayout(location.pathname)] || BaseLayout;\n  console.log(Container,'Container');\n  return (\n    &lt;Container>\n      {children}\n    &lt;\/Container>\n  );\n}\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>export const selectLayout = (pathname) => {\n  return pathname.includes('\/users') ? 'LoginLayout' : 'BaseLayout';\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u5b89\u88c5 \u5728\u666e\u901a\u7684 Umi \u5e94\u7528\u4e2d\uff0c\u9ed8\u8ba4 \u4e0d\u9644\u5e26\u4efb\u4f55\u63d2..<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,11],"tags":[30,28,29],"class_list":["post-339","post","type-post","status-publish","format-standard","hentry","category-react-","category-front","tag-antd","tag-react","tag-umi"],"featured_image_urls":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":""},"author_info":{"info":["\u9648 \u67d0\u4eba"]},"category_info":"<a href=\"https:\/\/mitongxue.cn\/index.php\/category\/front\/react-%e5%89%8d%e7%ab%af\/\" rel=\"category tag\">React<\/a> <a href=\"https:\/\/mitongxue.cn\/index.php\/category\/front\/\" rel=\"category tag\">\u524d\u7aef<\/a>","tag_info":"\u524d\u7aef","comment_count":"0","_links":{"self":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts\/339","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/comments?post=339"}],"version-history":[{"count":8,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts\/339\/revisions"}],"predecessor-version":[{"id":348,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts\/339\/revisions\/348"}],"wp:attachment":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/media?parent=339"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/categories?post=339"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/tags?post=339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}