你能用Material-UI链接和react-router-dom链接吗？

Question

鉴于这两个组成部分：

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

有没有一种方法可以用React-Router-DOM的功能从Material-UI获得样式？

Answer 1

您可以使用Material-UI的链接的组件道具与React-Router-DOM中的链接集成。您可以使用Material-UI的按钮做同样的事情。

下面的示例显示了这两种情况：

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