[React]ルーティング

フッターにボトムナビゲーションコンポーネントを使用し、選択したナビゲーションによって表示を変化させる

import React, { useEffect } from "react";
import { Box, Button, makeStyles } from "@material-ui/core";
import { useApp } from '../context'
import VideoChatContainer from "./VideoChatContainer";
import { Footer } from "./Footer";

// スタイルの記述をする
const useStyles = makeStyles(theme => ({
	outer: {
	  position: "absolute",
	  width: window.parent.screen.width,
	  height: window.parent.screen.height,
	  margin: "0 auto",
	  padding: theme.spacing(0),
	  alignItems: "center",
	  justifyContent: "center",
	//   backgroundColor: theme.palette.background.default
	backgroundColor: "gold",
	},
 
	inner: {
	  width: "100px",
	  minHeight: "20px",
	  maxHeight: "30px",
 
	  margin: "8px",
	  padding: theme.spacing(4),
 
	  display: "flex",
	  alignItems: "center",
	  justifyContent: "center"
	}
 }));
// 
export const Home = ({handleLogout}) => {	
	const { state, dispatch } = useApp();
	const classes = useStyles();

	const changePage = () => {
		if (state.page == 0) {
			return (
				<div>
					<VideoChatContainer />
					<Button className={classes.inner} variant="contained" color="primary" onClick={handleLogout}>ログアウト</Button>
				</div>
			)
		} else if (state.page == 1) {
			return (
				<div>
					page = 1
				</div>
			)
		} else if (state.page == 2) {
			return (
				<div>
					page = 2
				</div>
			)
		}
	};
	return (
		<Box className={classes.outer}>
			{changePage()}
			<Footer dispatch={dispatch} />
		</Box>		
		);
}

フッターコンポーネントにグローバルな状態管理をする関数dispatchを渡している。このdispatchをBottomNavigationのonChange()のなかに含める。

フッターのコード

import React, { useState } from "react";
import { BottomNavigation, BottomNavigationAction, makeStyles } from "@material-ui/core";
import RestoreIcon from '@material-ui/icons/Restore';
import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';
import LocationOnIcon from '@material-ui/icons/LocationOn';
// import { useApp } from '../context'

// スタイルの記述をする
const useStyles = makeStyles(theme => ({  
	bottomContainer: {
       position: 'relative',
       bottom: '0px',
       // margin: '0',
	}
 }));
// 
export const Footer = ({dispatch}) => {	
   const [navValue, setNavValue] = useState(0);
	const classes = useStyles();
	return (
		<BottomNavigation
           value={navValue}
           onChange={(event, newValue) => {
               console.log('newValue : ', newValue);
               setNavValue(newValue);
               dispatch({type: 'SET_PAGE', payload: newValue});
           }}
           showLabels
           className={classes.bottomContainer}
           >
           <BottomNavigationAction label="Recents" icon={<RestoreIcon />} />
           <BottomNavigationAction label="Favorites" icon={<FavoriteBorderIcon />} />
           <BottomNavigationAction label="Nearby" icon={<LocationOnIcon />} />
       </BottomNavigation>
		);
}