今回の記事ではTypeScriptベースのReactプロジェクトでページ遷移を行う方法を初心者向けにご紹介する記事です。ページ遷移は初心者が苦戦する場所と思われるのでできるだけわかりやすく説明していきます。是非参考にしてください。
TypeScriptのReactプロジェクト作成
node等がインストールされてない方はインストールして下さい。その前提で話を進めます。
npx create-react-app sample --template typescriptまずは上記で「sample」プロジェクトを作成します。
cd sample
npm startこれでローカルサーバが立ち上がって初期画面が表示できます。
ではページ遷移に関してご紹介していきます。
Reactでページ遷移を行うためのモジュール
Reactでページ遷移をする上で必要なライブラリは「react-router-dom」です。起動したローカルサーバを閉じて、下記コマンドを実行し、ライブラリをインストールします。
npm install react-router-dom @types/react-router-domではこのライブラリを使ったページ遷移を行う方法を解説していきます。
Reactでページ遷移を行う方法
App.tsxのみを変更してページ遷移をおこなってみます。
同一ファイル内のコンポーネントで表示を切り替える
1ページ内でページ遷移を実装することは少ないと思いますが、下記で実装できます。
import './App.css';
import { BrowserRouter, Route,Link, Routes } from 'react-router-dom';
// 最初に表示されている遷移元ページ
const Home = () => {
return (
<div>
<h1>
元ページ
</h1>
<Link to="/Senni">遷移</Link>
</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;
下記コマンドでサーバを起動できます。
npm start
↓
「react-router-dom」をimportして下記のようにpathの中身を変えて定義します。
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/Senni" element={<Senni />} />
</Routes>
</BrowserRouter>初期表示が下記URLのため、①画面が表示され、リンクをクリックすると②画面が表示されているという流れです。
- 「http://localhost:3000/」 → ①画面
- 「http://localhost:3000/Senni」 → ②画面
ページごとにファイルが別れている場合が多いと思うのでそちらも記述します。
別ファイルに記述したページへ遷移
まずは、元ページからの遷移ページ用ファイルを作成します。
「App.tsx」「index.tsx」と同階層に「Senni.tsx」ファイルを作成します。
ファイルの中身は下記のように記述してください。
const Senni = () => {
return (
<div>
<h1>
遷移
</h1>
</div>
)
}
export default Senni;「App.tsx」はSeniの部分を外部ページから取ってきましょう。
import './App.css';
import { BrowserRouter, Route,Link, Routes } from 'react-router-dom';
import Senni from './Senni' //ここで別ファイルからコンポーネントを読み込み
// 最初に表示されている遷移元ページ
const Home = () => {
return (
<div>
<h1>
元ページ
</h1>
<Link to="/Senni">遷移</Link>
</div>
)
}
// メイン画面（pathによって表示数画面を変更）
const App = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/Senni" element={<Senni />} />
</Routes>
</BrowserRouter>
)
};
export default App;
「import Seni from ‘./Seni’」の部分で外部ファイルからコンポーネントをインポートしています。
では今回の記事は以上です。
React・TypeScriptは現在勉強中のため、随時記事を更新していきます。興味がある方はサイト内みて行ってください。
コメント