ReactでRouterを実装してみた！react-router-dom を導入

引き続き、React でTodoリストを開発しているわけですが、

今回は、Router を導入し、ページ遷移ができるようにしてみました。

Vue.js でもvue-router ってのがあるし、

JSのフレームワークを触るなら、router の知識も必須ですよね！

ってことで早速実装します。

今回使用するパッケージは、react-router-dom

これをインストールするだけで、もうrouter が使用できるようになります。

導入も超簡単

import { BrowserRouter, Route, Link } from "react-router-dom";
Code language: JavaScript (javascript)

import でreact-router-dom を読み込んでやって、

const App = () => (
  <BrowserRouter>
    <div>
      <div>
        <Link to="/">Home</Link>
      </div>
      <div>
        <Link to="/about">About</Link>
      </div>
    </div>
    <hr />
    <div>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </div>
  </BrowserRouter>
);
Code language: JavaScript (javascript)

Router にURLパスにしたがって、よびだすcomponent を定義

Link に遷移先を定義してやるだけですね。

BrowserRouter　ってのが少し馴染みにくいかもですが、

公式からコピペして使用するだけなんで、とくに深く考える必要はないかも

気になる人は、パッケージのソースも読んでみたらいいかもですね。

同じようなパッケージにreact-router ってのもあるみたいですけど、

これはRouter は使用できるけど、Link が使えないみたいなんで、

Router を導入するなら、react-router-domを使用するで問題ないみたい

router って何か難しいようなイメージがありましたが、

実際に実装してみると、５分くらいで実装できてしまうんで

めちゃ簡単です！

yotube更新中！↓