![](/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.