公式Webサイト

Reactでのページ遷移は、「React Router」を用いた画面遷移が多いかと思われます。
今回は「React Router」を用いず、ステートに基づいたviewコンポーネント（画面表示用のコンポーネント）の表示切り替えで、画面遷移っぽいものを作る機会がありましたので、ここに残したいと思います。

表示非表示にするための状態を定義

今回はユーザーの状態を管理するuserStateというステートに基づいてコンポーネントの表示切り替えを行いたいので、まずはuserStateを定義します。

  //ユーザーの状態を管理（状態によって表示させるコンポーネントを変更したい為）
  const [userState,setUserState] = useState("comp1");

useStateを変更するための関数を用意

続いて、useStateを変更するための関数「userStateChange」を用意します。
これを用意しておくことで色々な場面、たとえばクリックや入力などのフォーム操作に対して、useStateを変更する挙動を実装することが出来ます。

  //userStateの状態を変更する為の関数
  const userStateChange = (newUserState) => {
    setUserState(newUserState);
  };

定義した関数、userStateChangeの引数として文字列を与えたりすることで、setUserState（useStateの更新関数）が発火し、userStateの値が更新されるような流れとなります。

userStateの状態により、返すコンポーネントを変更する関数を定義

userStateの状態から分岐し、該当のコンポーネントを返す関数「renderComponent」を定義します。
この関数を定義し、表示領域（該当コンポーネントのretrun内）で関数を実行することで、表示されるコンポーネントの表示切り替えができます。
そして、propsとしてuserStateChange関数を渡してあげることで、呼び出し先のコンポーネントでuserStateChangeを扱うことが出来ます。

  //userStateの状態によって返すコンポーネントを変更する
  function renderComponent() {
    if (userState === 'comp1') {
      //propsにuserStateChangeを指定
      return 
    } else if (userState === 'comp2') {
      //propsにuserStateChangeを指定
      return 
    } else if (userState === 'comp3') {
      //propsにuserStateChangeを指定
      return 
    }
  }

例えばComponent1内にあるボタンをクリックしたときに「onClick(()=>{userDataStateChange(‘comp2’)})」が動作するようになっている場合、そのボタンをクリックしたらComponent2が表示される仕組みとなります。
ここまでで定義したものについてまとめると下記の形となります。

  //ユーザーの状態を管理（状態によって表示させるコンポーネントを変更したい為）
  const [userState,setUserState] = useState("comp1");

  //userStateの状態を変更する為の関数
  const userStateChange = (newUserState) => {
    setUserState(newUserState);
  };

  //userStateの状態によって返すコンポーネントを変更する
  function renderComponent() {
    if (userState === 'comp1') {
      return 
    } else if (userState === 'comp2') {
      return 
    } else if (userState === 'comp3') {
      return 
    }
  }

上記で、表示領域（該当コンポーネントのretrun「外」）での処理は終了となります。

表示領域内でrenderComponent()を実行する

先ほど作成したrenderComponent()を定義するだけでは動きませんので、該当コンポーネントの表示領域であるretrun内でrenderComponent()を実行しましょう。

return (
  <>
  {renderComponent()}
  </>
);

上記のように定義することで、表示切り替えを行いたいコンポーネント内でrenderComponent()を取り扱った表示切り替えが可能となりました。