引き続き、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更新中!↓