LoginSignup
8
4

More than 3 years have passed since last update.

Material-UIのLinkコンポーネントとreact-router-linkでページ遷移させる

Posted at

Reactのmaterial-uiのLinkとreact-router-linkを使ってページ遷移させる書き方が微妙にわからなかったので備忘録がてら。
ルーティングの記述は書いてある前提とします。

Link.jsx
import { Link } from "@material-ui/core";
import { Link as RouterLink } from "react-router-dom";

const LinkComponent = (props) => {
  return (
    <Link
     component={RouterLink}
     to={props.to} //遷移先
     color="primary"
    >
     {props.text} //表示するテキスト
    </Link> )
}

解説

ポイントはMaterial-UIのLinkのcompnentにreact-router-domのLinkを渡すことです。
Linkで名前が被ってしまうので、そこはasを使って別名にしてます。

同じような悩みを持っている方のお役に立てれば幸いです。

参考

https://material-ui.com/components/links/
https://material-ui.com/guides/composition/#link

8
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
4