![](/img/trans.png)
[英]Link from react-router-dom is not working properly with material-ui
[英]Can you use Material-UI Link with react-router-dom Link?
鑒於這兩個組成部分:
import Link from '@material-ui/core/Link';
import { Link } from 'react-router-dom';
有沒有辦法通過react-router-dom
的功能從 Material-UI 獲取樣式?
您可以使用 Material-UI 的Link
的component
屬性與react-router-dom
中的Link
集成。 您可以使用 Material-UI 的Button
做同樣的事情。
這是一個顯示兩者的示例:
import React from "react";
import { Route } from "react-router";
import { BrowserRouter as Router, Link as RouterLink } from "react-router-dom";
import Link from "@material-ui/core/Link";
import Button from "@material-ui/core/Button";
export default function LinkRouter() {
return (
<Router>
<div>
<Link component={RouterLink} to="/">
Link to Home
</Link>
<br />
<Link component={RouterLink} to="/inner">
Link to inner page
</Link>
<br />
<Button
variant="contained"
color="primary"
component={RouterLink}
to="/inner"
>
Button to inner page
</Button>
<Route path="/" exact>
<div>Here's Home</div>
</Route>
<Route path="/inner">
<div>Here's the inner page</div>
</Route>
</div>
</Router>
);
}
我創建了一個包裝器組件來合並兩個鏈接,因此不必每次都添加組件道具。
import { LinkProps, Link as MuiLink } from "@mui/material";
import { Link as ReactRouterLink } from "react-router-dom";
import React, { FC } from "react";
const Link: FC<LinkProps> = props => {
return (
<MuiLink {...props} component={ReactRouterLink} to={props.href ?? "#"} />
);
};
export default Link;
您可以像使用 MUI/LINK 一樣使用 is:
import Link from './components/Link';
<Link href="path_to_link">LINK</Link>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.