Reactでroutingを設定する

2201 ワード
フロントエンド React プログラミング プログラミング テキストリンク

Reactでのルーティングの設定方法

react-router-domを使用して、ルーティングを設定します。

BrowerRouter

react-router-domの機能を使用するためには、使用するコード全体をで囲う必要があります。

return (
 <BrowerRouter>
  ・・・
</BrowerRouter>
);

Link

react-router-domのLinkを使うと、Linkで囲った子要素を押下して特定のパスのページを開く機能を実装できます。

import {Link} from "react-router-dom";

const example = () => {
 return (
  <BrowerRouter>
     <Link to="パスの入力位置">移動</Link>
  </BrowerRouter>
);
}

上記の場合、画面に移動というリンクが表示されているので、押下すると入力位置に入力したパスのページを開きます。

Route

react-router-domのRouteを使うと、どのパスにページが対応しているかを設定できます。

import {Route} from "react-router-dom";
import {Home} from "Home.tsxのファイルのパスを入力"

const example = () => {
 return (
  <BrowerRouter>
     <Route path="/home">
        <Home/>
     </Route>
  </BrowerRouter>
);
}

上記の場合、/homeというパスをurlに指定したり、/homeを先程のLinkのtoの引数に渡した状態で、その子要素を押下したとき、Home.tsxファイルの画面に遷移します。

Switch

react-router-domのSwitchは、基本的に複数のRouteを設定するときにで囲みます。
(なくても動作するそうですが。)

import {Switch} from "react-router-dom";
import {Home} from "Home.tsxのファイルのパスを入力"
import {Page1} from "Page1.tsxのファイルのパスを入力"

const example = () => {
 return (
  <BrowerRouter>
   <Switch>
     <Route path="/home">
        <Home/>
     </Route>
     <Route path="/page1">
        <Page1 />
     </Route>
   <Switch>
  </BrowerRouter>
);
}

まとめ

Reactのルーティングの設定の、基礎の基礎だけですが、紹介させていただきました。
何かの参考になれば幸いです。

hbaseテーブルの内容の削除について
iOSダイヤルのいくつかの方法