Youtube[React Hooks]

Warning: count(): Parameter must be an array or an object that implements Countable in /home/xs638785/agile-software.site/public_html/wp-content/plugins/rich-table-of-content/functions.php on line 490

components

components >NavBar.js

components フォルダを作成し、その直下に NavBar.js ファイルを作成します。
Reactのiconを使用する

import React from 'react'
import { withCookies } from 'react-cookie';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar'
import Toolbar from '@material-ui/core/Toolbar'
import Typography from '@material-ui/core/Typography';

import { FiLogOut } from 'react-icons/fi';
import { FaYoutube } from 'react-icons/fa';

適用したいCSSを記述、useStylesに格納

const useStyles = makeStyles((theme) => ({
    title: {
      flexGrow: 1,
    },
}));

AppBarとToolbarで囲む
classes.titleとすることでuseStylesのtitleプロパティを使うことができます。

const NavBar = (props) => {
    const classes = useStyles();

    const Logout = () =>  {
      props.cookies.remove('jwt-token');
      window.location.href = '/';
    }

    return (
        <AppBar position="static">
        <Toolbar>
        <button className="logo">
          <FaYoutube/>
        </button>
        <Typography variant="h5" className={classes.title}>Youtube App</Typography>

        <button className="logout" onClick={()=>Logout()}>
          <FiLogOut/>
        </button>

        </Toolbar>
        </AppBar>
    )
}

App.js

アイコンに

.logo {
  background-color: transparent;
  color: lightgray;
  margin-top: 7px;
  font-size: 25px;
  border: none;
  outline: none;
}

.logout {
  background-color: transparent;
  color: lightgray;
  margin-top: 7px;
  font-size: 25px;
  border: none;
  outline: none;
  cursor: pointer;
}

Router

npm install react-router-dom

components > Logins.jsの作成

BrowserRouterで囲むことでrouterを<CookiesProvider> で囲むことでCookiesを使用する

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

import { Route, BrowserRouter } from 'react-router-dom';
import Login from './components/Login';
import { CookiesProvider } from 'react-cookie';

ReactDOM.render(
  <React.StrictMode>
  <BrowserRouter>
  <CookiesProvider>
  
  <Route exact path="/" component={Login} />
  <Route exact path="/youtube" component={App} />

  </CookiesProvider>
  </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')

serviceWorker.unregister();