スポンサーリンク

「React」と「TypeScript」でページ遷移する方法ご紹介。

TypeScript
スポンサーリンク

今回の記事では「React」と「TypeScript」でページ遷移する方法をご紹介する記事です。「react-router-dom」を使用します。私が初心者のため、初心者が陥る点を踏まえてわかりやすく解説していきます。是非参考にしてみて下さい。

スポンサーリンク

プロジェクトをReact+TypeScriptで作成

まずは基礎となる「React」と「TypeScript」のプロジェクトを作成しましょう。

npx create-react-app sample001 --template typescript

これでプロジェクトが作成されます。私はVSCodeで行っておりますので下記のようになっております。

これでプロジェクト作成完了です。ターミナルを開き作成されたプロジェクトに入り、ローカルサーバーを立ててみましょう。

cd sample001
npm start

これで下記をブラウザで表示するとReactページを表示することができます。

http://localhost:3000

react-router-domインストール

次にページ遷移用の「react-router-dom」をインストールします。(ローカルサーバは閉じてもOKです。)

npm install react-router-dom @types/react-router-dom

ではこれで準備は完了なので実装に移りましょう。

「React」と「TypeScript」でページ遷移

ファイルを分ける場合と1ファイルにまとめて記載する場合で分けて記載していきます。

「index.tsx」について

「index.tsx」は下記と同じようにしておきます。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

簡単に解説を行っていくと、こちらの「index.tsx」が最初に表示されるページで、「React.StrictMode」の要素の中にある「App」が「App.tsx」から出力される「App」を表示しています。「App.tsx」に関しては下記で詳細に説明していきます。

App.tsxを操作で編集していきます。

「App.tsx」について

1ファイルでページ遷移

1ページ内でページ遷移を実装することは少ないと思いますが、下記で実装できます。

import React, { Component } from 'react'
import { BrowserRouter, Route, Switch, Redirect,Link } from 'react-router-dom';
//メインのApp
const App = () => {
  return (
   <BrowserRouter>
     <div>
       <Route exact path="/" component={Home} />
       <Route exact path="/seni" component={Seni} />
     </div>
   </BrowserRouter>
  )
};
//遷移元
const Home = () => {
   return (
     <div>
       <h1>
         元
       </h1>
       <Link to="/seni">遷移</Link>
     </div>
   )
}
//遷移先
const Seni = () => {
  return (
    <div>
      <h1>
        遷移
      </h1>
    </div>
  )
}
//Appを出力
export default App;

下記コマンドでサーバを起動できます。

npm start
遷移をクリック

     ↓

URLじかうちでもOK

こちらも少し解説します。「react-router-dom」をimportして使用します。

<BrowserRouter>
     <div>
       <Route exact path="/" component={Home} />
       <Route exact path="/seni" component={Seni} />
     </div>
</BrowserRouter>

constで定義している「App」の中にある、「BrowserRouter」でルーティング用のパスを指定します。「localhost」のURLの後ろにpathをつけると遷移できるようになります。

「http://localhost:3000/(ルーティングパス)」

ルーティングで飛ぶページ先がcomponentで記述している「component={ページ}」

そのため、下記のような遷移を作れます。

http://localhost:3000/ → Home
http://localhost:3000/seni → Seni

遷移用のボタンを作成している部分は「Home」の「Link」タグで囲まれている部分です。パスも指定します。

複数ファイルでページ遷移

複数ファイルに分けて書く場合もそこまで難しくありません。

下記のようにファイルを分ければOKです。

「index.tsx」は変わりません。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

「Seni.tsx」に遷移先のページのコンポーネントを記載します。

import React, { Component } from 'react'

const Seni = () => {
    return (
      <div>
        <h1>
          遷移
        </h1>
      </div>
    )
  }

export default Seni;

「App.tsx」はSeniの部分を外部ページから取ってきましょう。

import React, { Component } from 'react'
import { BrowserRouter, Route, Switch, Redirect,Link } from 'react-router-dom';
import Seni from './Seni'

const App = () => {
  return (
   <BrowserRouter>
     <div>
       <Route exact path="/" component={Home} />
       <Route exact path="/seni" component={Seni} />
     </div>
   </BrowserRouter>
  )
};
const Home = () => {
   return (
     <div>
       <h1>
         元
       </h1>
       <Link to="/seni">遷移</Link>
     </div>
   )
}

export default App;

「import Seni from ‘./Seni’」の部分で外部のファイルからコンポーネントを取得し、ファイル内で使用しています。

では今回の記事は以上です。タイプスクリプトは勉強中ですので随時記事を記載していきます。気になる記事があればサイト内見ていって下さい。

コメント

タイトルとURLをコピーしました