今回の記事はTypeScriptベースのReactでボタンでのページ遷移方法に関する初心者用の記事です。ボタンアクションを使ってページ遷移の練習をおこなってみましょう。初心者でもわかるように簡単に記載していくので是非参考にしてみてください。
Reactプロジェクト環境構築
タイプスクリプトベースのReactプロジェクトを作成します。
node等がインストールされてない方はインストールして下さい。その前提で話を進めます。
npx create-react-app sample --template typescript
まずは上記で「sample」プロジェクトを作成します。
cd sample
npm start
これでローカルサーバが立ち上がって初期画面が表示できます。
上記画面が表示されればうまく環境構築できているのでOKです。
Reactで画面にボタンを配置
まずは、ボタンを配置してみましょう。「src/App.tsx」を以下のように修正します。
import './App.css';
// メイン画面(pathによって表示数画面を変更)
const App = () => {
return (
<div>
<h1>元ページ</h1>
<button>ボタン</button>
</div>
)
};
export default App;
これだけで画面にボタンが表示されます。
「index.tsx」は変更しなくてOKです。
次にこのボタンにアクションをつけてみましょう。
Reactで画面のボタンにコンソールアクション
import './App.css';
// メイン画面(pathによって表示数画面を変更)
const App = () => {
// ボタンアクション
const onConsole = () => {
console.log('ボタンクリック')
}
return (
<div>
<h1>元ページ</h1>
<button onClick={onConsole()}>ボタン</button>
</div>
)
};
export default App;
見た目は変わりませんが、これでボタンを押した際にコンソールに文字が出力されます。
ページ遷移用モジュールのインストール
ではいよいよページ遷移を行います。
ページ遷移にはいろいろ種類がありますが、今回は最も簡単な方法をご紹介します。
下記「react-router-dom」というモジュールをインストールします。
npm install react-router-dom @types/react-router-dom
種類や値を渡すなどに関しては別記事を記載しているのでそちらを参考にしみてください。
【React】ページ遷移の種類と実装ご紹介。〜 初心者向け 〜
【React】ページ遷移時の値渡しの種類と実装ご紹介。〜 初心者向け 〜
こちらこの記事の終わりにも再度リンク貼りますので後で見たい方はこの記事身終えてから見てみてください。
Reactで画面のボタンにページ移動
では先ほどインストールした「react-roter-dom」を利用してページ遷移ボタンアクションを画面に組み込んで見ましょう。
import './App.css';
import { BrowserRouter, Route, Routes, useNavigate } from 'react-router-dom';
// 最初に表示されている遷移元ページ
const Home = () => {
// 遷移用ボタンアクション
const navigation = useNavigate()
const onMovePage = () => {
navigation("/Senni");
}
return (
<div>
<h1>
元ページ
</h1>
<button onClick={onMovePage}>ボタン</button>
</div>
)
}
//遷移先
const Senni= () => {
return (
<div>
<h1>
遷移しました。
</h1>
</div>
)
}
// メイン画面(pathによって表示数画面を変更)
const App = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/Senni" element={<Senni />} />
</Routes>
</BrowserRouter>
)
};
export default App;
画面遷移ように二つのコンポーネントを用意しています。
// 最初に表示されている遷移元ページ
const Home = () => {
// 遷移用ボタンアクション
const navigation = useNavigate()
const onMovePage = () => {
navigation("/Senni");
}
return (
<div>
<h1>
元ページ
</h1>
<button onClick={onMovePage}>ボタン</button>
</div>
)
}
上記が初期表示されている画面部分(コンポーネント)です。
//遷移先
const Senni= () => {
return (
<div>
<h1>
遷移しました。
</h1>
</div>
)
}
上記が遷移した後の画面表示です。
この画面コンポーネントを下記のルーティングに沿って入れ替えているイメージです。
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/Senni" element={<Senni />} />
</Routes>
</BrowserRouter>
// 例
// http:localhost:3000/がブラウザで開かれた場合 → <Home />
// <Route path="/" element={<Home />} />
// http:localhost:3000/Senniがブラウザで開かれた場合 → <Senni />
// <Route path="/Senni" element={<Senni />} />
このURLは初期表示の場合は「http:localhost:3000」が開かれる場合、「<Home />」が開かれます。そこでURLを変更する指示をボタンアクションに組み込んでいるのが下記です。
// 遷移用ボタンアクション
const navigation = useNavigate()
const onMovePage = () => {
navigation("/Senni");
}
「useNavigator」という便利メソッドを使用しています。
使用している部分は下記です。
<button onClick={onMovePage}>ボタン</button>
これで画面遷移ができていると思います。
では今回の記事は以上です。
ページ遷移には複数種類があるため、気になる方は下記記事も参考にしてみてください。
【React】ページ遷移の種類と実装ご紹介。〜 初心者向け 〜
【React】ページ遷移時の値渡しの種類と実装ご紹介。〜 初心者向け 〜
コメント