トップ > React基礎 > Reactでの簡単すぎるタブ実装 react-tabs

Reactでの簡単すぎるタブ実装 react-tabs

React基礎 ライブラリ

react-tabsによる実装はすごくシンプルな設計で簡単に導入する事が出来る為、初心者でも扱いやすいタブ機能となっております。

個人的にはオススメします、私も度々使用します。

react-tabsのgithubは以下となりますので参照ください。

github/react-tabs

事前準備

Node.js

npm or yarn

create-react-app

React v17~

Windows or Mac

実装方法は簡単でございます

CRA(create-react-app)で作成したご自身のプロジェクトにnpmで必要なモジュールをインストールします。

npm install —save react-tabs

yarn add react-tabs

これで準備は完了です、後はApp.jsファイルで 必要な数のモジュールをインポートしていきましょう。

import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';

import 'react-tabs/style/react-tabs.css';

上記のCSSは元々react-tabsで用意されているCSSが適用されます、なのでCSSも一緒にインポートします。

スタイルをご自身で適用する方法は後ほど解説致します。

まずは簡単なタブコンポーネント実装をしていきます。

簡単実装 Tabs

// App.js

const App = () => {
return(

  <Tabs>
    <TabList>
      <Tab>HOME</Tab>
      <Tab>About</Tab>
      <Tab>Contact</Tab>
    </TabList>

    <TabPanel>
      <h1>HOMEです</h1>
    </TabPanel>
    <TabPanel>
      <h1>Aboutです</h1>
    </TabPanel>
     <TabPanel>
      <h1>Contactです</h1>
    </TabPanel>
  </Tabs>
)

}

react-tabs

See the Pen React-tabs by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.


上記の通りすぐに完成です、Vanilla.jsでもタブ実装は可能ですが、React-Tabsは最速実装となっております。

では使い方の説明を致します。

react-tabsの構成はTabs 、TabList 、Tab 、TabPanelこの4つのコンポーネントで構成されています。

これらは複合コンポーネントと言います。

Tabs

Tabsコンポーネントに追加のPropsを指定すると、レンダリング時にそれらのPropsが生成されるルート要素（Wrapper）に適用されます。ルート要素は<div>として転送されます。

Tabs コンポーネントはタブのセット全体を囲む役割を担います。

TabList

TabListコンポーネントに追加のPropsを指定すると、レンダリング時にそれらのPropsが生成される要素に適用されます。

要素は<ul>として転送されます。

TabList コンポーネントはタブをまとめる親の役割を担います。

Tab

Tabコンポーネントに追加のPropsを指定すると、レンダリング時にそれらのPropsが生成される要素に適用されます。

要素は<li>として転送されます。Tabコンポーネントはタブのタイトルやボタンなどを表示する役割を担います。

TabPanel

TabPanelコンポーネントに追加のPropsを指定した場合も、レンダリング時にそれらのPropsが生成される要素に適用されます。

要素は<div>として転送されます。

ただし、TabPanelの子要素は、Tabコンポーネントと同じ数と順番で表示されます。つまり、TabPanelの子要素の順番はTabListを介してTabによって処理されることに注意してください。

このように、複数のコンポーネントを組み合わせて新しいコンポーネントを作成することで、再利用可能なコンポーネントを作りやすくなります。また、コンポーネントの階層構造を使って、コンポーネントの関連性や親子関係を表現することもできます。

複合コンポーネントを使用することで、コードをより分割して管理しやすくし、可読性と保守性を向上させることができます。また、より柔軟なUIの構築や、複雑な機能の実装にも役立ちます。

では、タブをネスト化してみましょう。

Tabのネスト化

const App = () => {
    return(
       <Tabs forceRenderTabPanel defaultIndex={1}>
    <TabList>
      <Tab>メインTab</Tab>
      <Tab>サブTab</Tab>
    </TabList>
    <TabPanel>
      <Tabs forceRenderTabPanel>
        <TabList>
          <Tab>タブ1</Tab>
          <Tab>タブ2</Tab>
          <Tab>タブ3</Tab>
          <Tab>タブ4</Tab>
        </TabList>
        <TabPanel>
          <p>タブ1ページ</p>
          
        </TabPanel>
        <TabPanel>
          <p>タブ2ページ</p>
        </TabPanel>
        <TabPanel>
          <p>タブ3ページ</p>
        </TabPanel>
        <TabPanel>
          <p>タブ4ページ</p>
        </TabPanel>

      </Tabs>
    </TabPanel>

    <TabPanel>
      <Tabs forceRenderTabPanel>
        <TabList>
          <Tab>タブ5</Tab>
          <Tab>タブ6</Tab>
          <Tab>タブ7</Tab>
          <Tab>タブ8</Tab>
         
        </TabList>
        <TabPanel>
          <p>タブ5ページ</p>
         
        </TabPanel>
        <TabPanel>
          <p>タブ6ページ</p>
         
        </TabPanel>
        <TabPanel>
          <p>タブ7ページ</p>
         
        </TabPanel>
        <TabPanel>
          <p>タブ8ページ</p>
        </TabPanel>
      </Tabs>
    </TabPanel>
  </Tabs>
       
    )
}

See the Pen React-tabs ネスト by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.


ネストになると多少複雑化します。

上記のコードは、2つの階層でタブがネストされています。

最初の階層では、TabsとTabPanelコンポーネントが使用されており、それぞれメインのタブとサブタブを表しています。

const App = () => {
    return(
        
       <Tabs forceRenderTabPanel defaultIndex={1}>
    <TabList>
      <Tab>メインTab</Tab>
      <Tab>サブTab</Tab>
    </TabList>
    <TabPanel>
      <Tabs forceRenderTabPanel>
        <TabList>
          <Tab>タブ1</Tab>
          <Tab>タブ2</Tab>
          <Tab>タブ3</Tab>
          <Tab>タブ4</Tab>
        </TabList>
        <TabPanel>
          <p>タブ1ページ</p>
          
        </TabPanel>
        <TabPanel>
          <p>タブ2ページ</p>
        </TabPanel>
        <TabPanel>
          <p>タブ3ページ</p>
        </TabPanel>
        <TabPanel>
          <p>タブ4ページ</p>
        </TabPanel>

      </Tabs>
    </TabPanel>

    <TabPanel>
      <Tabs forceRenderTabPanel> // さらにグループ化
        <TabList>
          <Tab>タブ5</Tab>
          <Tab>タブ6</Tab>
          <Tab>タブ7</Tab>
          <Tab>タブ8</Tab>
         
        </TabList>
        <TabPanel>
          <p>タブ5ページ</p>
         
        </TabPanel>
        <TabPanel>
          <p>タブ6ページ</p>
         
        </TabPanel>
        <TabPanel>
          <p>タブ7ページ</p>
         
        </TabPanel>
        <TabPanel>
          <p>タブ8ページ</p>
        </TabPanel>
      </Tabs>
    </TabPanel>
  </Tabs>
       
    )
}

最初の階層のTabList内には、2つのメインタブが定義されています。1つ目のメインタブにはメインTabというタイトルがあり、2つ目のメインタブにはサブTabというタイトルがあります。

TabPanelコンポーネントは、各メインタブに対応するコンテンツを定義しています。最初のメインタブのTabPanel内には、2番目の階層のタブがあります。

2番目の階層のタブについても、同様の構造が繰り返されます。

各メインタブのTabPanel内には、それぞれ異なるタブのセットが定義されています。

例えば、最初のメインタブのTabPanel内には、タブ1からタブ4までの4つのタブがあります。

各タブのTabPanel内には、対応するタブのコンテンツが定義されています。

このように、TabsとTabPanelをネストして使用することで、複数の階層のタブを作成することができます。

ユーザーがメインタブを選択すると、そのメインタブに対応するサブタブが表示され、ユーザーはサブタブの中からコンテンツを選択できます。

上記の例では、2つのメインタブとそれぞれのサブタブがありますが、階層の深さやタブの数を必要に応じて変更することができます。

react-tabsにはメインコンテナとして機能する複合コンポーネントがございますので紹介致します。

Props(プロパティ)を渡すことで、タブを無効にしたり、デフォルトのインデックスを設定したりすることもできます。

タブをカスタマイズするために利用できる非常に多くのPropsがございます。

まずはTabsの複合コンポーネントのPropsからいきましょう。

react-tabsに独自のスタイル

react-tabsは基本的には用意されたCSSがありそれをインポートし適用させます。

しかしデフォルトでスタイルは含まれていません。

代わりにコンポーネントは、スタイルを自分で適用するために使用できるレンダリングPropsを介して有用な情報を公開します。

デフォルトのスタイルを無効にする場合は

setUseDefaultStylesメソッドを使用します。

これは、TabsコンポーネントのPropsとして渡される関数です。

この静的メソッドを1度呼び出すとデフォルトのスタイルを無効化する事が可能となります。

引数にはブール値であるtrue、falseの設定です

import { Tabs, TabList, Tab, TabPanel } from 'react-tabs';

Tabs.setUseDefaultStyles(false);

const ExampleTabs = () => {
  return (
    <Tabs forceRenderTabPanel={true}>
      <TabList>
        <Tab>Tab 1</Tab>
        <Tab>Tab 2</Tab>
        <Tab>Tab 3</Tab>
      </TabList>
      <TabPanel>
        <p>Content for Tab 1</p>
      </TabPanel>
      <TabPanel>
        <p>Content for Tab 2</p>
      </TabPanel>
      <TabPanel>
        <p>Content for Tab 3</p>
      </TabPanel>
    </Tabs>
  );
};

export default ExampleTabs;

上記の例では、Tabs.setUseDefaultStyles(false) をコンポーネントの外で呼び出しています。これにより、デフォルトのスタイルが無効になります。

その後、ExampleTabsコンポーネントの中で Tabs、TabList、Tab、TabPanel コンポーネントを使用してタブセットを作成しています。ただし、デフォルトのスタイルは無効化されているため、タブのスタイルはユーザーが独自に定義する必要があります。

このようにしてTabs.setUseDefaultStyles(false) を使用すると、デフォルトのスタイルを無効にし、カスタムスタイルを適用することができます。

他の方法も利用することができます。

react-tabsライブラリでは、defaultCSSプロパティを使用してデフォルトのスタイルを無効にすることができます。以下に例を示します。

import { Tabs, TabList, Tab, TabPanel } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';

function App() {
  return (
    <Tabs defaultCSS={false}>
      <TabList>
        <Tab>Tab 1</Tab>
        <Tab>Tab 2</Tab>
        <Tab>Tab 3</Tab>
      </TabList>
      <TabPanel>
        <p>Content for Tab 1</p>
      </TabPanel>
      <TabPanel>
        <p>Content for Tab 2</p>
      </TabPanel>
      <TabPanel>
        <p>Content for Tab 3</p>
      </TabPanel>
    </Tabs>
  );
}

export default App;

上記の例では、defaultCSSプロパティをfalseに設定しています。これにより、デフォルトのスタイルシートが無効化されます。

また、import 'react-tabs/style/react-tabs.css';を使用して、react-tabsライブラリが提供するデフォルトのスタイルシートをインポートしています。

これにより、カスタムスタイルを適用する前に、必要なスタイリングの基礎が整います。

この方法を使用すると、Tabs コンポーネントでデフォルトのスタイルを無効にし、独自のスタイルを適用することができます。

forceRenderTabPanel

TabsにあるforceRenderTabPanel defaultIndex={1}

forceRenderTabPanelはデフォルトのreact-tabsでは選択したタブのコンテンツのみをレンダリングしコンポーネントをデフォルトでの動作を制御モードにします。

引数は基本的にはブール値となります。

import { Tabs, TabList, Tab, TabPanel } from 'react-tabs';

const ExampleTabs = () => {
  return (
    <Tabs forceRenderTabPanel={true}>
      <TabList>
        <Tab>Tab 1</Tab>
        <Tab>Tab 2</Tab>
        <Tab>Tab 3</Tab>
      </TabList>
      <TabPanel>
        <p>Content for Tab 1</p>
      </TabPanel>
      <TabPanel>
        <p>Content for Tab 2</p>
      </TabPanel>
      <TabPanel>
        <p>Content for Tab 3</p>
      </TabPanel>
    </Tabs>
  );
};

export default ExampleTabs;

上記のコードでは、ExampleTabsコンポーネントが定義されています。

ExampleTabsコンポーネント内には、Tabs、TabList、Tab、TabPanelコンポーネントが使用されています。

Tabsコンポーネントは、タブのセット全体を表します。forceRenderTabPanelプロパティをtrueに設定することで、すべてのTabPanelコンポーネントが初期レンダリングされます。

TabListコンポーネントは、タブのリストを表示するための親要素です。Tabコンポーネントは、各タブを表し、タイトルやボタンなどを表示します。

TabPanelコンポーネントは、タブのコンテンツを表示するためのコンポーネントです。Tab コンポーネントと同じ数と順番で配置され、対応するタブと関連付けられます。

各TabPanel内には、対応するタブに関連するコンテンツを表示するための要素（ここでは <p>要素）を配置しています。

これによって、タブのセットをレンダリングし、すべてのタブパネルが初期表示されるようになります。

これはタブ間のアニメーションなどでは役に立つ場合があります。

defaultIndex

デフォルトで選択されているタブを変更します。

defaultIndexのインデックス番号はデフォルトでは0となります。

2番目は1と続きます。

これはreact-tabsが現在選択されているタブを内部で処理する場合にのみ非制御モードで使用できます。

そのためselectedIndexと一緒に使用することはできません。

import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';

const ExampleTabs = () => {
  return (
    <Tabs defaultIndex={1}>
      <TabList>
        <Tab>Title 1</Tab>
        <Tab>Title 2</Tab>
        <Tab>Title 3</Tab>
      </TabList>

      <TabPanel>
        <h2>Content 1</h2>
      </TabPanel>
      <TabPanel>
        <h2>Content 2</h2>
      </TabPanel>
      <TabPanel>
        <h2>Content 3</h2>
      </TabPanel>
    </Tabs>
  );
};

export default ExampleTabs;

上記の例では、TabsコンポーネントのdefaultIndexプロパティを1に設定しています。これにより、最初に表示されるタブのインデックスを指定しています（0から始まるインデックスです）。

TabList内に表示される各Tabは、タブのタイトルを表しています。TabPanel内に表示される各コンテンツは、それぞれのタブに関連するコンテンツを表しています。

defaultIndexプロパティを使用して最初に表示されるタブを制御することができます。指定したインデックスに対応するタブとコンテンツが初期表示されます。

disableUpDownKeys: bool

デフォルトではfalseとなっています。

タブを変更するには、上下の矢印キーを無効にします。

マウントする事に、DOMノードを受け取るコールバックを登録します。

また、アンマウント時にはnullを受け取ります。

import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';

const ExampleTabs = () => {
  return (
    <Tabs disableUpDownKeys={true}>
      <TabList>
        <Tab>Title 1</Tab>
        <Tab>Title 2</Tab>
        <Tab>Title 3</Tab>
      </TabList>

      <TabPanel>
        <h2>Content 1</h2>
      </TabPanel>
      <TabPanel>
        <h2>Content 2</h2>
      </TabPanel>
      <TabPanel>
        <h2>Content 3</h2>
      </TabPanel>
    </Tabs>
  );
};

export default ExampleTabs;

上記の例では、TabsコンポーネントのdisableUpDownKeysプロパティをtrueに設定しています。これにより、キーボードの上下矢印キーによるタブの切り替えを無効にします。

TabList内に表示される各Tabは、タブのタイトルを表しています。TabPanel内に表示される各コンテンツは、それぞれのタブに関連するコンテンツを表しています。

この例を参考に、disableUpDownKeysプロパティを使用して、キーボードによるタブの切り替えを制御することができます。

onSelect

このイベントハンドラーは、タブ<Tab>が変更されるたびに呼び出されます。

つまりタブが選択されたときに呼び出される関数です。

引数として渡さるのはtabNameになります。

制御モードでは、onSelectハンドラーは必須のPropsとなります。

import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';

const ExampleTabs = () => {
  const onSelect = (tabIndex) => {
    console.log('Selecting tab', tabIndex);
  };

  return (
    <Tabs onSelect={onSelect}>
      <TabList>
        <Tab>Title 1</Tab>
        <Tab>Title 2</Tab>
        <Tab>Title 3</Tab>
      </TabList>

      <TabPanel>
        <h2>Content 1</h2>
      </TabPanel>
      <TabPanel>
        <h2>Content 2</h2>
      </TabPanel>
      <TabPanel>
        <h2>Content 3</h2>
      </TabPanel>
    </Tabs>
  );
};

export default ExampleTabs;

上記の例では、TabsコンポーネントのonSelectプロパティにonSelect関数を渡しています。onSelect関数は、タブが選択された際に呼び出されます。

onSelect関数内では、選択されたタブのインデックスが引数として渡されます。この例では、選択されたタブのインデックスをコンソールに出力しています。

TabList内に表示される各Tabは、タブのタイトルを表しています。TabPanel内に表示される各コンテンツは、それぞれのタブに関連するコンテンツを表しています。

onSelectプロパティを使用してタブの選択時の処理をカスタマイズすることができます。具体的な処理はonSelect関数内で定義し、選択されたタブの情報を活用することができます。

selectedIndex

インデックスを持つタブ<Tab>が選択されます

index(数値)はデフォルトでは0となります。

import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';

const ExampleTabs = () => {
  const selectedIndex = 1;

  return (
    <Tabs selectedIndex={selectedIndex}>
      <TabList>
        <Tab>Title 1</Tab>
        <Tab>Title 2</Tab>
        <Tab>Title 3</Tab>
      </TabList>

      <TabPanel>
        <h2>Content 1</h2>
      </TabPanel>
      <TabPanel>
        <h2>Content 2</h2>
      </TabPanel>
      <TabPanel>
        <h2>Content 3</h2>
      </TabPanel>
    </Tabs>
  );
};

export default ExampleTabs;

上記の例では、TabsコンポーネントのselectedIndexプロパティを1に設定しています。これにより、初期表示時に2番目のタブが選択されます（0から始まるインデックス）。

TabList内に表示される各Tabは、タブのタイトルを表しています。TabPanel内に表示される各コンテンツは、それぞれのタブに関連するコンテンツを表しています。

この例を参考に、selectedIndexプロパティを使用して初期表示時の選択されたタブを制御することができます。指定したインデックスに対応するタブが選択された状態で表示されます。

以下からは、TabListの複合コンポーネントを解説していきます。

disabledTabClassName

タブが無効になっている場合付けられるカスタムクラスとなります。

タブを無効にするにはdisabledを使用します

無効になっているタブはマウスで選択できません。

また、キーボードを使用してタブリストをナビゲートするときにスキップされます。

<TabList>
        <Tab>Tab 1</Tab>
        <Tab disabled={true}>Tab 2</Tab>
        <Tab>Tab 3</Tab>
</TabList>

プロパティをtrue設定すれば無効となります。

タブの外側にカスタムクラス名を指定します。

import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';

const ExampleTabs = () => {
  return (
    <Tabs>
      <TabList disabledTabClassName="myDisabledClass">
        <Tab>Tab 1</Tab>
        <Tab disabled={true}>Tab 2</Tab>
        <Tab>Tab 3</Tab>
      </TabList>

      <TabPanel>
        <h2>Content 1</h2>
      </TabPanel>
      <TabPanel>
        <h2>Content 2</h2>
      </TabPanel>
      <TabPanel>
        <h2>Content 3</h2>
      </TabPanel>
    </Tabs>
  );
};

export default ExampleTabs;

上記の例では、TabListコンポーネントにdisabledTabClassNameプロパティを設定しています。このプロパティには、無効化されたタブに適用するためのクラス名を指定します。

TabList内に表示される各Tabは、タブのタイトルを表しています。2番目のタブはdisabledプロパティをtrueに設定して無効化されています。

disabledTabClassNameプロパティを指定することで、無効化されたタブに指定したクラス名が適用されます。これにより、スタイリングや視覚的な変更を適用することができます。

また以下のように、クラス名の配列またはクラス名がキーであり、値が名前を追加する必要があるかどうかを示すブール値であるオブジェクトを指定することも可能です。

import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';

const ExampleTabs = () => {
  const disabledTabs = {
    'tab2': true,
    'tab4': true
  };

  return (
    <Tabs>
      <TabList disabledTabClassName={['myDisabledClass1', 'myDisabledClass2']} disabledTabs={disabledTabs}>
        <Tab>Tab 1</Tab>
        <Tab>Tab 2</Tab>
        <Tab>Tab 3</Tab>
        <Tab>Tab 4</Tab>
      </TabList>

      <TabPanel>
        <h2>Content 1</h2>
      </TabPanel>
      <TabPanel>
        <h2>Content 2</h2>
      </TabPanel>
      <TabPanel>
        <h2>Content 3</h2>
      </TabPanel>
      <TabPanel>
        <h2>Content 4</h2>
      </TabPanel>
    </Tabs>
  );
};

export default ExampleTabs;

上記の例では、TabListコンポーネントにdisabledTabClassNameプロパティとdisabledTabsプロパティを指定しています。

disabledTabClassNameプロパティには、クラス名の配列 ['myDisabledClass1', 'myDisabledClass2'] を指定しています。これにより、無効化されたタブに対して複数のクラス名を適用することができます。

disabledTabsプロパティには、オブジェクト { 'tab2': true, 'tab4': true } を指定しています。このオブジェクトは、無効化するタブのキーとしてタブのインデックスや識別子を指定し、対応する値をtrueに設定することでタブを無効化します。

ですが、ほとんどは文字列です。

これらの例を参考に、disabledTabClassNameプロパティを使用して無効化されたタブに対してカスタムのスタイリングを適用することができます。

activeTabClassName

タブがアクティブ状態時のみ付けられるカスタムクラス名となります。

import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';

const ExampleTabs = () => {
  return (
    <Tabs>
      <TabList activeTabClassName="myActiveClass">
        <Tab>Tab 1</Tab>
        <Tab>Tab 2</Tab>
        <Tab>Tab 3</Tab>
      </TabList>

      <TabPanel>
        <h2>Content 1</h2>
      </TabPanel>
      <TabPanel>
        <h2>Content 2</h2>
      </TabPanel>
      <TabPanel>
        <h2>Content 3</h2>
      </TabPanel>
    </Tabs>
  );
};

export default ExampleTabs;

上記の例では、TabListコンポーネントにactiveTabClassNameプロパティを設定しています。このプロパティには、アクティブなタブに適用するためのクラス名を指定します。

TabList内に表示される各Tabは、タブのタイトルを表しています。

activeTabClassNameプロパティを指定することで、アクティブなタブに指定したクラス名が適用されます。これにより、アクティブなタブを視覚的に強調表示するためのスタイリングを適用することができます。

activeTabClassNameプロパティを使用してアクティブなタブに対してカスタムのスタイリングを適用することが可能となります。

className

基本的には4つのコンポーネントにはclassNameを付与する事が可能となっています。

import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';

const ExampleTabs = () => {
  return (
    <TabList className="TabList">
      <Tabs className="Tabs">
        <Tab className="Tab">1</Tab>
      </Tabs>
      <TabPanel className="TabPanel">One</TabPanel>
    </TabList>
  );
};

export default ExampleTabs;

上記の例では、各コンポーネントに対してclassNameプロパティを設定しています。

これにより、各コンポーネントに指定したクラス名が適用されます。これらのクラス名を使用して、各コンポーネントのスタイリングや視覚的な変更を行うことができます。

そして、Tabで囲んだコンポーネントをreact-router-domを使用しページ間で画面遷移などで上手く連携させたりします。

例えば、React Router-domとReact Tabsを使用してページ遷移を行う簡単な例を示します。

まず、必要なパッケージをインストールします。

npm install react-router-dom@next react-tabs

// or

yarn add react-router-dom@next

"next"タグが付いたパッケージは、開発者が次のバージョンを試し、テストし、フィードバックを提供することを目的としています。これにより、新しい機能や変更点についてのフィードバックを集めることができます。

したがって、react-router-dom@nextをインストールすることで、React Routerの次のバージョンの機能を利用できるようになりますが、実際のプロジェクトで使用する際には、開発状況や安定性に注意を払う必要がありますので気をつけてください。

次に、App.jsファイルに、以下のコードを追加します。

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';

// ページコンポーネント
const Home = () => <h1>ホームページ</h1>;
const About = () => <h1>アバウトページ</h1>;
const Contact = () => <h1>コンタクトページ</h1>;

const App = () => {
  return (
    <Router>
      <Tabs>
        <TabList>
          <Tab>
            <Link to="/">Home</Link>
          </Tab>
          <Tab>
            <Link to="/about">About</Link>
          </Tab>
          <Tab>
            <Link to="/contact">Contact</Link>
          </Tab>
        </TabList>

        <Routes>
          <Route path="/" element={<TabPanel><Home /></TabPanel>} />
          <Route path="/about" element={<TabPanel><About /></TabPanel>} />
          <Route path="/contact" element={<TabPanel><Contact /></TabPanel>} />
        </Routes>
      </Tabs>
    </Router>
  );
};

export default App;

上記のコードでは、react-router-domのBrowserRouterを使用してルーティングを設定しています。また、Routesコンポーネントを使用してルートのマッチングを行っています。

各ルートにはelementプロパティを使用し、対応するページコンポーネントを指定しています。

最後に、Appコンポーネントをエクスポートしてアプリケーションを起動します。

これにより、React Router v6とReact Tabsを使用して、ページ遷移とタブの表示を行うことができます。

このコードはテンプレートとして提供したので、自由に構築やカスタマイズが可能です。

このテンプレートをベースにして、自分のアプリケーションの要件に合わせてルート、ページコンポーネント、タブなどを追加、変更、カスタマイズすることができます。

例えば、新しいルートやページコンポーネントを追加するには、<Routes>内に新しい<Route>要素を追加し、pathプロパティとelementプロパティを指定します。

また、新しいタブを追加するには、<TabList>内に新しい<Tab>要素を追加し、その内部に<Link>を配置します。

React Router v6の基本的な解説以下で学べますので、参照ください。

dev-k.hatenablog.com

最後に

Reactタブには、操作できる2つの異なるモードがあり、状態を自分で管理する必要がある方法を変更します。

それは制御モードと非制御モードとなります。

非制御モードでは、react-tabsのデフォルトのモードであり、react-tabsコンポーネントにその状態を内部で処理させます。

defaultIndexで開始タブを変更でき、onSelectで変更可能です。

非制御モードでは、実行時にタブを強制的に変更することはできませんので注意して下さい。

制御モードは、TabsコンポーネントにselectedIndexを与えて有効にする必要があります。

このモードでは、react-tabsはタブの選択状態を内部で一切処理する事はありません。

すべての状態管理を外部アプリケーションに委ねます。

またonSelectにハンドラを設定することが強制され、defaultIndexは何の効果もないため、エラーをスローします。

制御モードを扱う際は、react-tabsの内部動作により、ラップしているコンポーネントに受信したPropsを渡す必要があります。

それを行う最も簡単な方法は、スプレッド演算子を使用することです。

本日は以上となります。

最後まで読んで頂きありがとうございます。

この記事が役に立ったら、ブックマークと共有をしていただけると幸いです。

#react #React Hooks

dev04K 読者になる

広告を非表示にする
コメントを書く
プライバシーポリシー

© 2023 Icons8 LLC. All rights reserved.

© [deve.K], 2023. React logo is a trademark of Facebook, Inc. JavaScript is a trademark of Oracle Corporation and/or its affiliates. jQuery and the jQuery logo are trademarks of the JS Foundation. TypeScript and the TypeScript logo are trademarks of the Microsoft Corporation. Next.js and the Next.js logo are trademarks of Vercel, Inc. Firebase and the Firebase logo are trademarks of Google LLC. All logos edited by [deve.K].