Material UI 路由庫集成指南用 Link、Button 對接 react-router、Next.js 與 TanStack Router【免費下載鏈接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.項目地址: https://gitcode.com/GitHub_Trending/ma/material-ui本文基于 Material UI 官方文檔 Routing libraries 展開講解如何把 Material UI 的導(dǎo)航組件與第三方路由庫集成默認情況下導(dǎo)航由原生a元素完成你可以將其替換為 react-router 的Link、Next.js 的Link或 TanStack Router 的createLink。讀完本文你將掌握三種集成手段——單組件的componentprop、全局主題級LinkComponent/defaultProps配置以及面向 Next.js Pages Router 的適配器組件寫法并了解ButtonBase內(nèi)部將按鈕切換為鏈接模式的實現(xiàn)原理。導(dǎo)航組件Link 與啟用鏈接模式的 ButtonMaterial UI 中承擔(dān)導(dǎo)航職責(zé)的核心組件有兩個Link從名字就能看出用途它渲染一個原生a元素并把href作為屬性應(yīng)用上去。最基礎(chǔ)的用法import Link from mui/material/Link; import Box from mui/material/Box; export default function LinkDemo() { return ( Box sx{{ typography: body1 }} Link href/Link/Link /Box ); }任何擴展了ButtonBase的組件如Button都可以通過提供hrefprop 進入“鏈接模式”import Button from mui/material/Button; export default function ButtonDemo() { return ( Button href/ variantcontained Link /Button ); }從源碼結(jié)構(gòu)看這個“按鈕變鏈接”的行為由ButtonBase的實現(xiàn)直接決定。在 ButtonBase.js 中可以看到LinkComponent的默認值為aLinkComponent a,隨后組件會判斷“是否以鏈接意圖渲染”并在component為button時將其替換為LinkComponentButtonBase.jsconst isLink Boolean(other.href || other.to); ... let ComponentProp component; if (ComponentProp button isLink) { ComponentProp LinkComponent; }也就是說只要href或to任一 prop 存在Material UI 就認為該組件應(yīng)當(dāng)渲染為鏈接而LinkComponent正是后面“全局替換路由庫 Link”的掛載點。這一機制也被測試用例覆蓋ButtonBase.test.js 中的 “should use custom LinkComponent when provided in the theme” 驗證了通過主題注入自定義LinkComponent后ButtonBase href...確實渲染為自定義鏈接組件。全局主題級 Link一次配置全應(yīng)用生效在實際應(yīng)用中單純的原生a往往不夠用——你可能需要客戶端路由帶來的無刷新導(dǎo)航。Material UI 的主題允許你把這個“增強版 Link”一次性配置到全局。以 react-router 為例對應(yīng)示例 LinkRouterWithTheme.tsximport { Link as RouterLink, LinkProps as RouterLinkProps } from react-router; import { LinkProps } from mui/material/Link; const LinkBehavior React.forwardRef HTMLAnchorElement, OmitRouterLinkProps, to { href: RouterLinkProps[to] } ((props, ref) { const { href, ...other } props; // Map href (Material UI) - to (react-router) return RouterLink ref{ref} to{href} {...other} /; }); const theme createTheme({ components: { MuiLink: { defaultProps: { component: LinkBehavior, } as LinkProps, }, MuiButtonBase: { defaultProps: { LinkComponent: LinkBehavior, }, }, }, });這里做了兩件配合的事MuiLink.defaultProps.component讓所有Link組件默認走LinkBehavior把 Material UI 語義的href映射到 react-router 的toMuiButtonBase.defaultProps.LinkComponent覆蓋了上文源碼中LinkComponent a的默認值使所有 Button 系組件在鏈接模式下同樣走LinkBehavior。配置完成后Link href/和Button href/都不需要再逐個傳component。TypeScript 限制該方案在 TypeScript 下有一個局限——hrefprop 只接受字符串。如果你需要傳遞更豐富的結(jié)構(gòu)如 Next.js 的{ pathname, query }對象見下文基于componentprop 的寫法。componentprop逐組件集成路由庫不依賴全局主題時可以直接通過componentprop 完成與第三方路由庫的集成。該 prop 的完整語義包括 props 透傳規(guī)則在 組合指南 的 component prop 一節(jié)有說明。以 react-router 為例對應(yīng)示例 LinkRouter.tsxconst LinkBehavior React.forwardRefany, OmitRouterLinkProps, to | href( (props, ref) ( RouterLink ref{ref} to/material-ui/getting-started/installation/ {...props} / ), ); Link component{RouterLink} to/With prop forwarding/Link Link component{LinkBehavior}Without prop forwarding/Link兩種寫法的區(qū)別在于 props 透傳策略With prop forwarding直接把RouterLink作為componentMaterial UI 會把to等 prop 原樣透傳給路由庫組件Without prop forwardingWith inlining通過forwardRef自定義LinkBehavior包裝層在內(nèi)部自行控制屬性映射例如固定to值、把href重映射為to適合路由庫 API 與 Material UI prop 命名不一致的場景。React Router 實戰(zhàn)Link、Button、Tabs、List同一套策略可以應(yīng)用到所有導(dǎo)航類組件BottomNavigation、Card、Tabs、List 等。官方示例文件均位于 docs/data/material/integrations/routing/ 目錄。Link即上節(jié)所示Link component{RouterLink} to/或配合LinkBehavior包裝層使用。Button 與role屬性陷阱對應(yīng)示例 ButtonRouter.tsxconst LinkBehavior React.forwardRefany, OmitRouterLinkProps, to( (props, ref) RouterLink ref{ref} to/ {...props} role{undefined} /, ); export default function ButtonRouter() { return ( Router Button component{RouterLink} to/ With prop forwarding /Button Button component{LinkBehavior}With inlining/Button /Router ); }這里有一個容易踩的坑ButtonBase 在識別到“用非原生button元素渲染按鈕”的意圖時會附加rolebutton屬性。當(dāng)渲染的其實是一個鏈接時這個role會造成可訪問性問題。因此如果你沒有使用href、to或componenta這三個 prop 之一就需要覆蓋role屬性——上面的示例通過在展開 props 之后設(shè)置role{undefined}來清除它。Tabs按路由模式高亮當(dāng)前標(biāo)簽對應(yīng)示例 TabsRouter.tsx 的關(guān)鍵點是用 react-router 的matchPath計算當(dāng)前激活的 Tabfunction MyTabs() { // 路由模式需要按“后代優(yōu)先”的順序提供 // 例如嵌套路由 users, users/new, users/edit // 順序應(yīng)為 [users/add, users/edit, users] const routeMatch useRouteMatch([/inbox/:id, /drafts, /trash]); const currentTab routeMatch?.pattern?.path; return ( Tabs value{currentTab} Tab labelInbox value/inbox/:id to/inbox/1 component{Link} / Tab labelDrafts value/drafts to/drafts component{Link} / Tab labelTrash value/trash to/trash component{Link} / /Tabs ); }兩個細節(jié)值得注意Tab通過tocomponent{Link}實現(xiàn)點擊導(dǎo)航而value必須與路由模式字符串保持一致才能讓matchPath命中后正確高亮。由于匹配是從前到后遍歷帶參數(shù)的模式如/inbox/:id必須排在更寬泛的模式之前。ListListItemButton 接入路由對應(yīng)示例 ListRouter.tsx 封裝了一個列表項鏈接組件function ListItemLink(props: ListItemLinkProps) { const { icon, primary, to } props; return ( ListItemButton component{Link} to{to} {icon ? ListItemIcon{icon}/ListItemIcon : null} ListItemText primary{primary} / /ListItemButton ); }ListItemButton同樣擴展自ButtonBase因此component{Link}to即可讓列表項具備 react-router 的客戶端導(dǎo)航能力示例中 Inbox / Drafts / Trash / Spam 四個文件夾都以此方式接入。Next.js Pages Router官方示例倉庫中的適配器倉庫中的 examples/material-ui-nextjs-pages-router-ts 示例文件夾提供了 Next.jsLink與 Material UI 的適配方案核心實現(xiàn)在 src/Link.tsx。該文件導(dǎo)出了兩版適配器NextLinkComposed第一版適配器不帶樣式只負責(zé)處理導(dǎo)航。它把 prophref重命名為to以避免命名沖突與 react-router 的 Link 組件同理export const NextLinkComposed React.forwardRefHTMLAnchorElement, NextLinkComposedProps( function NextLinkComposed(props, ref) { const { to, linkAs, ...other } props; return NextLink href{to} as{linkAs} ref{ref} {...other} /; }, );使用方式import Button from mui/material/Button; import { NextLinkComposed } from ../src/Link; export default function Index() { return ( Button component{NextLinkComposed} to{{ pathname: /about, query: { name: test }, }} Button link /Button ); }Link第二版適配器是帶樣式的版本——它內(nèi)部使用 Material UI 的Link組件并搭配NextLinkComposed同時通過useRouter比較router.pathname與目標(biāo)路徑為當(dāng)前激活的鏈接自動附加activeClassName默認active。它還支持noLinkStyleprop開啟后返回未套樣式的NextLinkComposed。使用方式import Link from ../src/Link; export default function Index() { return ( Link href{{ pathname: /about, query: { name: test }, }} Link /Link ); }這個適配器的存在恰好回應(yīng)了上文主題方案的 TypeScript 局限由于 Next.js 的href可以接收{(diào) pathname, query }這類非字符串結(jié)構(gòu)只能走componentprop 路徑而非主題級href映射。TanStack Router使用 createLink 定制鏈接TanStack Router 通過createLink輔助函數(shù)支持自定義鏈接組件。下面的片段是最基本的實現(xiàn)包裹一個 Material UI Link 組件import { createLink } from tanstack/react-router; import { Link as MUILink } from mui/material; const CustomLink createLink(MUILink); function App() { return ( CustomLink underlinenone to/about Link to about page /CustomLink ); }createLink(MUILink)返回的組件會自動處理to等路由 props 與a語義的對接Material UI 側(cè)只需保持常規(guī)樣式屬性如underlinenone。參考路徑匯總內(nèi)容倉庫路徑本文主體文檔docs/data/material/integrations/routing/routing.mdLink / Button 基礎(chǔ)示例LinkDemo.tsx、ButtonDemo.tsx主題級全局 Link 示例LinkRouterWithTheme.tsxreact-router 各組件示例LinkRouter.tsx、ButtonRouter.tsx、TabsRouter.tsx、ListRouter.tsxNext.js Pages Router 適配器examples/material-ui-nextjs-pages-router-ts/src/Link.tsxButtonBase 鏈接模式實現(xiàn)packages/mui-material/src/ButtonBase/ButtonBase.jsLinkComponent 主題注入測試packages/mui-material/src/ButtonBase/ButtonBase.test.jscomponent prop 組合語義docs/data/material/guides/composition/composition.md選擇建議如果只是少量組件需要路由導(dǎo)航用componentprop 最直接如果應(yīng)用內(nèi)絕大多數(shù)導(dǎo)航都要走客戶端路由優(yōu)先采用主題級MuiLinkMuiButtonBase.LinkComponent一次性配置注意href僅限字符串使用 Next.js Pages Router 且需要對象形式的href時參考官方示例倉庫中的NextLinkComposed/Link適配器實現(xiàn)?！久赓M下載鏈接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.項目地址: https://gitcode.com/GitHub_Trending/ma/material-ui創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 Material UI 路由庫集成指南：用 Link、Button 對接 react-router、Next.js 與 TanStack Router
Material UI 路由庫集成指南用 Link、Button 對接 react-router、Next.js 與 TanStack Router【免費下載鏈接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.項目地址: https://gitcode.com/GitHub_Trending/ma/material-ui本文基于 Material UI 官方文檔 Routing libraries 展開講解如何把 Material UI 的導(dǎo)航組件與第三方路由庫集成默認情況下導(dǎo)航由原生a元素完成你可以將其替換為 react-router 的Link、Next.js 的Link或 TanStack Router 的createLink。讀完本文你將掌握三種集成手段——單組件的componentprop、全局主題級LinkComponent/defaultProps配置以及面向 Next.js Pages Router 的適配器組件寫法并了解ButtonBase內(nèi)部將按鈕切換為鏈接模式的實現(xiàn)原理。導(dǎo)航組件Link 與啟用鏈接模式的 ButtonMaterial UI 中承擔(dān)導(dǎo)航職責(zé)的核心組件有兩個Link從名字就能看出用途它渲染一個原生a元素并把href作為屬性應(yīng)用上去。最基礎(chǔ)的用法import Link from mui/material/Link; import Box from mui/material/Box; export default function LinkDemo() { return ( Box sx{{ typography: body1 }} Link href/Link/Link /Box ); }任何擴展了ButtonBase的組件如Button都可以通過提供hrefprop 進入“鏈接模式”import Button from mui/material/Button; export default function ButtonDemo() { return ( Button href/ variantcontained Link /Button ); }從源碼結(jié)構(gòu)看這個“按鈕變鏈接”的行為由ButtonBase的實現(xiàn)直接決定。在 ButtonBase.js 中可以看到LinkComponent的默認值為aLinkComponent a,隨后組件會判斷“是否以鏈接意圖渲染”并在component為button時將其替換為LinkComponentButtonBase.jsconst isLink Boolean(other.href || other.to); ... let ComponentProp component; if (ComponentProp button isLink) { ComponentProp LinkComponent; }也就是說只要href或to任一 prop 存在Material UI 就認為該組件應(yīng)當(dāng)渲染為鏈接而LinkComponent正是后面“全局替換路由庫 Link”的掛載點。這一機制也被測試用例覆蓋ButtonBase.test.js 中的 “should use custom LinkComponent when provided in the theme” 驗證了通過主題注入自定義LinkComponent后ButtonBase href...確實渲染為自定義鏈接組件。全局主題級 Link一次配置全應(yīng)用生效在實際應(yīng)用中單純的原生a往往不夠用——你可能需要客戶端路由帶來的無刷新導(dǎo)航。Material UI 的主題允許你把這個“增強版 Link”一次性配置到全局。以 react-router 為例對應(yīng)示例 LinkRouterWithTheme.tsximport { Link as RouterLink, LinkProps as RouterLinkProps } from react-router; import { LinkProps } from mui/material/Link; const LinkBehavior React.forwardRef HTMLAnchorElement, OmitRouterLinkProps, to { href: RouterLinkProps[to] } ((props, ref) { const { href, ...other } props; // Map href (Material UI) - to (react-router) return RouterLink ref{ref} to{href} {...other} /; }); const theme createTheme({ components: { MuiLink: { defaultProps: { component: LinkBehavior, } as LinkProps, }, MuiButtonBase: { defaultProps: { LinkComponent: LinkBehavior, }, }, }, });這里做了兩件配合的事MuiLink.defaultProps.component讓所有Link組件默認走LinkBehavior把 Material UI 語義的href映射到 react-router 的toMuiButtonBase.defaultProps.LinkComponent覆蓋了上文源碼中LinkComponent a的默認值使所有 Button 系組件在鏈接模式下同樣走LinkBehavior。配置完成后Link href/和Button href/都不需要再逐個傳component。TypeScript 限制該方案在 TypeScript 下有一個局限——hrefprop 只接受字符串。如果你需要傳遞更豐富的結(jié)構(gòu)如 Next.js 的{ pathname, query }對象見下文基于componentprop 的寫法。componentprop逐組件集成路由庫不依賴全局主題時可以直接通過componentprop 完成與第三方路由庫的集成。該 prop 的完整語義包括 props 透傳規(guī)則在 組合指南 的 component prop 一節(jié)有說明。以 react-router 為例對應(yīng)示例 LinkRouter.tsxconst LinkBehavior React.forwardRefany, OmitRouterLinkProps, to | href( (props, ref) ( RouterLink ref{ref} to/material-ui/getting-started/installation/ {...props} / ), ); Link component{RouterLink} to/With prop forwarding/Link Link component{LinkBehavior}Without prop forwarding/Link兩種寫法的區(qū)別在于 props 透傳策略With prop forwarding直接把RouterLink作為componentMaterial UI 會把to等 prop 原樣透傳給路由庫組件Without prop forwardingWith inlining通過forwardRef自定義LinkBehavior包裝層在內(nèi)部自行控制屬性映射例如固定to值、把href重映射為to適合路由庫 API 與 Material UI prop 命名不一致的場景。React Router 實戰(zhàn)Link、Button、Tabs、List同一套策略可以應(yīng)用到所有導(dǎo)航類組件BottomNavigation、Card、Tabs、List 等。官方示例文件均位于 docs/data/material/integrations/routing/ 目錄。Link即上節(jié)所示Link component{RouterLink} to/或配合LinkBehavior包裝層使用。Button 與role屬性陷阱對應(yīng)示例 ButtonRouter.tsxconst LinkBehavior React.forwardRefany, OmitRouterLinkProps, to( (props, ref) RouterLink ref{ref} to/ {...props} role{undefined} /, ); export default function ButtonRouter() { return ( Router Button component{RouterLink} to/ With prop forwarding /Button Button component{LinkBehavior}With inlining/Button /Router ); }這里有一個容易踩的坑ButtonBase 在識別到“用非原生button元素渲染按鈕”的意圖時會附加rolebutton屬性。當(dāng)渲染的其實是一個鏈接時這個role會造成可訪問性問題。因此如果你沒有使用href、to或componenta這三個 prop 之一就需要覆蓋role屬性——上面的示例通過在展開 props 之后設(shè)置role{undefined}來清除它。Tabs按路由模式高亮當(dāng)前標(biāo)簽對應(yīng)示例 TabsRouter.tsx 的關(guān)鍵點是用 react-router 的matchPath計算當(dāng)前激活的 Tabfunction MyTabs() { // 路由模式需要按“后代優(yōu)先”的順序提供 // 例如嵌套路由 users, users/new, users/edit // 順序應(yīng)為 [users/add, users/edit, users] const routeMatch useRouteMatch([/inbox/:id, /drafts, /trash]); const currentTab routeMatch?.pattern?.path; return ( Tabs value{currentTab} Tab labelInbox value/inbox/:id to/inbox/1 component{Link} / Tab labelDrafts value/drafts to/drafts component{Link} / Tab labelTrash value/trash to/trash component{Link} / /Tabs ); }兩個細節(jié)值得注意Tab通過tocomponent{Link}實現(xiàn)點擊導(dǎo)航而value必須與路由模式字符串保持一致才能讓matchPath命中后正確高亮。由于匹配是從前到后遍歷帶參數(shù)的模式如/inbox/:id必須排在更寬泛的模式之前。ListListItemButton 接入路由對應(yīng)示例 ListRouter.tsx 封裝了一個列表項鏈接組件function ListItemLink(props: ListItemLinkProps) { const { icon, primary, to } props; return ( ListItemButton component{Link} to{to} {icon ? ListItemIcon{icon}/ListItemIcon : null} ListItemText primary{primary} / /ListItemButton ); }ListItemButton同樣擴展自ButtonBase因此component{Link}to即可讓列表項具備 react-router 的客戶端導(dǎo)航能力示例中 Inbox / Drafts / Trash / Spam 四個文件夾都以此方式接入。Next.js Pages Router官方示例倉庫中的適配器倉庫中的 examples/material-ui-nextjs-pages-router-ts 示例文件夾提供了 Next.jsLink與 Material UI 的適配方案核心實現(xiàn)在 src/Link.tsx。該文件導(dǎo)出了兩版適配器NextLinkComposed第一版適配器不帶樣式只負責(zé)處理導(dǎo)航。它把 prophref重命名為to以避免命名沖突與 react-router 的 Link 組件同理export const NextLinkComposed React.forwardRefHTMLAnchorElement, NextLinkComposedProps( function NextLinkComposed(props, ref) { const { to, linkAs, ...other } props; return NextLink href{to} as{linkAs} ref{ref} {...other} /; }, );使用方式import Button from mui/material/Button; import { NextLinkComposed } from ../src/Link; export default function Index() { return ( Button component{NextLinkComposed} to{{ pathname: /about, query: { name: test }, }} Button link /Button ); }Link第二版適配器是帶樣式的版本——它內(nèi)部使用 Material UI 的Link組件并搭配NextLinkComposed同時通過useRouter比較router.pathname與目標(biāo)路徑為當(dāng)前激活的鏈接自動附加activeClassName默認active。它還支持noLinkStyleprop開啟后返回未套樣式的NextLinkComposed。使用方式import Link from ../src/Link; export default function Index() { return ( Link href{{ pathname: /about, query: { name: test }, }} Link /Link ); }這個適配器的存在恰好回應(yīng)了上文主題方案的 TypeScript 局限由于 Next.js 的href可以接收{(diào) pathname, query }這類非字符串結(jié)構(gòu)只能走componentprop 路徑而非主題級href映射。TanStack Router使用 createLink 定制鏈接TanStack Router 通過createLink輔助函數(shù)支持自定義鏈接組件。下面的片段是最基本的實現(xiàn)包裹一個 Material UI Link 組件import { createLink } from tanstack/react-router; import { Link as MUILink } from mui/material; const CustomLink createLink(MUILink); function App() { return ( CustomLink underlinenone to/about Link to about page /CustomLink ); }createLink(MUILink)返回的組件會自動處理to等路由 props 與a語義的對接Material UI 側(cè)只需保持常規(guī)樣式屬性如underlinenone。參考路徑匯總內(nèi)容倉庫路徑本文主體文檔docs/data/material/integrations/routing/routing.mdLink / Button 基礎(chǔ)示例LinkDemo.tsx、ButtonDemo.tsx主題級全局 Link 示例LinkRouterWithTheme.tsxreact-router 各組件示例LinkRouter.tsx、ButtonRouter.tsx、TabsRouter.tsx、ListRouter.tsxNext.js Pages Router 適配器examples/material-ui-nextjs-pages-router-ts/src/Link.tsxButtonBase 鏈接模式實現(xiàn)packages/mui-material/src/ButtonBase/ButtonBase.jsLinkComponent 主題注入測試packages/mui-material/src/ButtonBase/ButtonBase.test.jscomponent prop 組合語義docs/data/material/guides/composition/composition.md選擇建議如果只是少量組件需要路由導(dǎo)航用componentprop 最直接如果應(yīng)用內(nèi)絕大多數(shù)導(dǎo)航都要走客戶端路由優(yōu)先采用主題級MuiLinkMuiButtonBase.LinkComponent一次性配置注意href僅限字符串使用 Next.js Pages Router 且需要對象形式的href時參考官方示例倉庫中的NextLinkComposed/Link適配器實現(xiàn)?！久赓M下載鏈接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.項目地址: https://gitcode.com/GitHub_Trending/ma/material-ui創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考