Router – Link使い方

今回は、React RouterのLinkについて簡単にメモしていきたいと思います。

Linkとは

• 別のアドレスに遷移させてくれるコンポーネントです。
• aタグを使ってしまうとページを再読み込みを行われるので、アプリの状態（statue）を失ってしまいます。

使い方

※「react-router-dom」ライブラリーを追加する必要があります。

<Link to="パス">内容</Link>

• パス：「/」、「/about」のような文字列を指定します。
• 内容：画面に表示される文字列を指定します。

サンプル

import React from "react";
import { Route, Link } from "react-router-dom";
import About from "./page/About";
import Home from "./page/Home";

// <Route path="パス" component={コンポーネント} />
const App = () => {
  return (
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
      <Route exact={true} path="/" component={Home} />
      <Route path="/about" component={About} />
    </div>
  );
};

export default App;

終わり

Linkコンポーネントも内部ではaタグを使っていますが、ページ遷移時に再読み込みを防ぐ機能があるらしいです。