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

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

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

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

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

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

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

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

https://www.npmjs.com/package/react-router-dom

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

導入も超簡単

import { BrowserRouter, Route, Link } from "react-router-dom";

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>
);

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

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

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

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

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

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

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

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

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

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

めちゃ簡単です!

yotube更新中!↓

https://www.youtube.com/channel/UCGq2Y94R8nXkJw0m2YFO4fA?view_as=subscriber

現場で働けるエンジニア育成プラン

未経験からエンジニアに転職したいと考えている人を対象にレッスンを行っております。


私は29歳未経験からエンジニアに転職しました。

それまではミュージシャンを目指して音楽活動ばかり。
社会人としての経験はゼロでした。

エンジニア転職を決めたきっかけは、
その当時、ミュージシャンという職に対して将来的に希望がもてず、お金もなく、副業でやっていた物販にも失敗し、借金も1000万オーバー。
まさに人生のどん底で、そんなときに次の人生のステージとしてプログラミングという世界を選択しました。

あれから、数年。
今ではフリーランスとして仕事ができており、
収入もあの頃の数倍にまでなり、借金も返済できました。
エンジニア転職で人生が変わったといっても過言ではありません。

ただ、エンジニアに転職してからの時期は、困難の連続でした。
とくに最初の1−2年は、わからないことだらけで、本当にハゲるかと思うくらい苦しく、
実際に1年半後には適応障害になり、体を壊してしまいました。

プログラマーという職はタフな仕事です。

これからエンジニアを目指される方には、少しでも現場で苦労してほしくないという気持ちで、プログラミングのレッスンをしております。

私のレッスンではPHPを基本的なところからしっかりと学習していただいております。

これからPHPを使ってバックエンドエンジニアになりたい方には、大変おすすめのレッスン内容になっております。

レッスンはマンツーマン形式を採用しており、
しっかりとメンティーさんお一人お一人に対して、丁寧にコードレビューをして、
プログラミングの基礎をしっかりと身につけていただきます。
出題する問題には回答は用意しておらず、ご自身がしっかりとロジックを考えることを最大限重視しています。
また現場基準でコードレビューをしっかりおこなっておりますので、悪いクセがつくことを防ぎます。

PHPを基礎からしっかりと学習したい、Webエンジニアとして転職を考えているということでしたら、私のレッスンはおすすめできます。

実際の実績としても、
30代での転職成功者も多数!
未経験から機械学習エンジニアに転職成功!
MENTAでは圧倒的に高評価のレビューをいただいております。

エンジニアに転職して、人生を変えたい
再チャレンジしたい
と思っている方
もしかするとお力になれるかもしれません。

まずはお気軽にご相談ください。