您可以将 Material-UI Link 与 react-router-dom Link 一起使用吗？

Question

鉴于这两个组件：

从“@material-ui/core/Link”导入链接；从'react-router-dom'导入{链接}；

有没有办法使用 react-router-dom 的功能从 Material-UI 获取样式？

Answer 1

我创建了一个包装器组件来合并两个链接，因此不必每次都添加组件道具。

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>

Answer 2

您可以使用componentMaterial-UI 的 propLink与Linkin集成react-router-dom。您可以使用 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>
  );
}

文档：https : //material-ui.com/guides/composition/#link