概要
ReactはUIのJavaScriptライブラリでシングルページアプリケーションのUI(User Interface)を生成することに集中したライブラリです。したがって、UIと関係ないページ移動機能は基本的提供してないです。そのため、Reactでページ移動機能を実装するためには外部のライブラリを使う必要があります。今回のブログポストではReactでページ移動機能を主に使えてるreact-routerについて説明します。
- React Routerの公式サイト: react-router
もし、Reactについてよく知らない方は、下記のリンクを確認してください。
ここで紹介するコードは下記のリンクで確認できます。
- GitHub: react_router_example
プロジェクトの準備
Reactでreact-routerを使ってページ移動機能を実装するためには、Reactプロジェクトを生成する予定です。このブログではCRA(create-react-app)とTypeScriptを使ってReactプロジェクトを生成する予定です。
そしたら次のコマンドを実行してTypeScriptベースのReactプロジェクトを生成します。
npx create-react-app react_router_example --template=typescript
react-routerのインストール
Reactでreact-routerを使うためにはreact-routerをインストールする必要があります。次のコマンドを実行してreact-routerをインストールします。
npm install --save react-router-dom
npm install --save-dev @types/react-router-dom
react-routerの使い方
それじゃ、今からreact-routerを使ってReactプロジェクトにページ移動機能を追加してみます。
Router
Reactプロジェクトでreact-routerを使うためには、まず、Routerを提供する必要があります。./src/index.tsxファイルを開いて下記のように修正します。
import { BrowserRouter as Router } from 'react-router-dom';
ReactDOM.render(
<React.StrictMode>
<Router>
<App />
</Router>
</React.StrictMode>,
document.getElementById('root')
);
react-routerの機能を使うコンポーネントは必ずRouterの中で宣言する必要があります。react-routerの機能をRouteの外で使う場合エラーが発生します。
Switch-Route
react-routerを使ってページ移動をするためにはSwitchとRouteを使ってページを定義する必要があります。SwitchとRouteの使い方を確認するため./src/App.tsxファイルを開いて下記のように修正します。
import { Switch, Route } from 'react-router-dom';
import { Home } from './Pages/Home';
import { Detail } from './Pages/Detail';
function App() {
return (
<div>
<header>This is header</header>
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/detail/:id">
<Detail />
</Route>
</Switch>
</div>
);
}
react-routerでSwitchとRouteを追加しました。また、作ってはないですが、画面に表示する2つのページコンポーネントも追加しました。
import { Switch, Route } from 'react-router-dom';
import { Home } from './Pages/Home';
import { Detail } from './Pages/Detail';
このように持ってきたSwitchとRouter、各ページコンポーネントを次のように使います。
<div>
<header>This is header</header>
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/detail/:id">
<Detail />
</Route>
</Switch>
</div>
基本的にはRouteはSwitch中で使います。そしてpathのPropsを使って、当該ページのURLを宣言します。最後に子コンポーネントで当該URLのページコンポーネントを追加します。
このように使うと、各URLに合うページが表示されます。もし、ページのURLに動的なデータが含まれたら、/detail/:idのように宣言して使うことができます。
<div>
<header>This is header</header>
<Switch>
...
</Switch>
</div>
URLによって変わる部分はSwitchの中で宣言します。Switchの外で宣言した<header/>はURLと関係なくいつも表示されます。
Link
そしたらHomeページコンポーネントを生成してみて、react-routerのリンクを使う方法を確認してみましょう。./src/Pages/Home/index.tsxファイルを生成して次のように修正します。
import { Link } from 'react-router-dom';
export const Home = () => {
return (
<div>
<div>
<Link to="/detail/1">Detail 1</Link>
</div>
<div>
<Link to="/detail/2">Detail 2</Link>
</div>
</div>
);
};
react-routerでページ移動をするためには<a/>タグの代わりreact-routerが提供する<Link/>コンポーネントを使います。このLinkコンポーネントはtoと言うPropsを持っていて、当該Propsに移動先のURLを設定します。
useHistoryとuseParams
次のようにDetailページコンポーネントを作ってuseHistoryとuseParamsフックを使う方法についてみてみましょう。./src/Pages/Detail/index.tsxファイルを生成して下記のように修正します。
import { useHistory, useParams } from 'react-router-dom';
export const Detail = () => {
const { goBack } = useHistory();
const params: { id: string } = useParams();
return (
<div>
<div>Detail {params.id}</div>
<button onClick={goBack}>GoBack</button>
</div>
);
};
react-routerのuseHistoryフックを使うと、プログラミングでページを移動させることができます。useHistoryはreplace, pushそしてgoBackを提供しております。
- replace: 現在のページを指定されたURLページに置き換え。ブラウザの戻るボタンを使って以前のページに戻ることができない。
- push: 指定されたURLページに移動。ブラウザの戻るボタンで以前のページに戻ることができる。
- goBack: ブラウザの戻るボタン後同じ役割。
react-routerのuseParamsはURLを使って渡した動的なデータを受ける時使います。私たちはDetailページコンポーネントを次のようにURLと連結しました。
<Route path="/detail/:id">
<Detail />
</Route>
そしてHomeページコンポーネントで次のようにURLにデータを設定しました。
<div>
<Link to="/detail/1">Detail 1</Link>
</div>
<div>
<Link to="/detail/2">Detail 2</Link>
</div>
この時、1, 2は:idに割り当てられます。useParamsを使うと:idに割り当てた値を使うことができます。
const params: { id: string } = useParams();
...
<div>Detail {params.id}</div>
完了
これでReactでページ移動をするためreact-routerをインストールして使う方法についてみてみました。react-routerはこのブログで紹介した機能以外にもたくさんの機能があります。このブログで紹介した機能以外の機能について知りたい方はぜひ公式サイトを参考してみてください。
- React Routerの公式サイト: Quick Start
私のブログが役に立ちましたか？下にコメントを残してください。それは私にとって大きな大きな力になります！
アプリ広報
Dekuが開発したアプリを使ってみてください。Dekuが開発したアプリはFlutterで開発されています。興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。
