ポエム

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 って何か難しいようなイメージがありましたが、

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

めちゃ簡単です!

yotube更新中!↓