初心者がReact+FirebaseでWebアプリを作成する⑤　～React Routerを使ったら認証機能の間違いに気付いた～

④の続きです。

一枚板では画面もコードも見づらいので、
React Routerでページ遷移できるようにします。

↓React Router公式ページのquickstartを参考にしました。
https://reacttraining.com/react-router/web/guides/quick-start


ひとまずコマンドでreact-router-domをインストール。
#####npm install react-router-dom
インストールが完了したらimportします。

```Javascript:App.js
import {  BrowserRouter as Router, Switch, Route, Link} from "react-router-dom";
```

あとは公式ページのBasicにならってページ遷移してみました。

```jsx:App.js
//色々省略
    <div>
      <Router>
        <AppBar position="static">
         <Toolbar>
            <Link to="/"><Typography variant="h6" style={{color:'white', padding:'5px'}}>マイページ</Typography></Link>
            <Link to="/form"><Typography variant="h6" style={{color:'white', padding:'5px'}}>投稿フォーム</Typography></Link>
            <Link to="/show"><Typography variant="h6" style={{color:'white', padding:'5px'}}>投稿一覧</Typography></Link>
            <Button variant="contained" color="secondary" onClick={this.logOut} style={{color:'white', padding:'10px'}}>ログアウト</Button> 
         </Toolbar>
        </AppBar>

        <Switch>
          <Route exact path="/">     
           <Mypage/>     
          </Route>

          <Route path="/form">
           <Form />
          </Route> 

          <Route path ="/show">
           <Show />
          </Route>
        </Switch>
      </Router>
     </div>
```
でこんなページができました。
![リアクトルーター　ショウ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520057/ad98b73e-6bae-7c85-fc5f-8129ee171bf8.png)
ちゃんとshowのページへ移動できるようになりました。
しかしひとつ問題が発生しました。

本来、認証機能を経てログインし、ログアウトを押せば認証画面に戻るというページにしたかったのですが、ログアウトした後もhttp:localhost:3000/〇〇〇のURLを入力すればダイレクトにページに入れてしまいました。
![リアクトルーター　誤り.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520057/5bfa1cf3-e4ed-51c1-6e6a-81dada8838ca.png)

原因を探ったらこれはログイン、ログアウトを自分で作成したstateで管理しようとしたためでした。↓今までのコード

```Javascript:App.js

  //これでは正式にログインとログアウトができない

  componentDidMount() {
    firebase.auth().onAuthStateChanged(user => {
      this.setState({
        isLogin: true,
      });
    });
  }
  logOut(){
    this.setState({
      isLogin: false,
    });
  }

  render(){
    if(this.state.isLogin){/}
```

これでは正しいログイン、ログアウトができていない様子。isLoginではなくuserを値としてsetし、firebase関数できちんとログアウトすべく、コードを訂正しました。

```Javascript:App.js
class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      user: null,
    }    
    this.logOut = this.logOut.bind(this);
   }

  componentDidMount() {
    firebase.auth().onAuthStateChanged(user => {
      this.setState({
        user: user,
      });
    });
  }

  logOut(){
      firebase.auth().signOut();
  }
  render(){
    let successfulUser;


  if(this.state.user){/}
```

これでURLに直接入ろうとしても、認証画面が表示されます。

![リアクトルーター　ショウ　ブロック.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520057/74771791-bc75-efa0-3ac5-abf670f867b0.png)


とりあえず今回の全体のコードはこんな感じです。

```jsx:App.js
import React from 'react';
import './App.css';
import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
import AppBar from '@material-ui/core/AppBar';
import Button from '@material-ui/core/Button';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import {  BrowserRouter as Router, Switch, Route, Link} from "react-router-dom";
import Form from './Form';
import Show from './Show';
import Mypage from './Mypage';
import Authentication from './Authentication';


class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      name: '',
      address: '',
      image: '',
      user: null,
    }    
    this.logOut = this.logOut.bind(this);
   }

  componentDidMount() {
    firebase.auth().onAuthStateChanged(user => {
      this.setState({
        user: user,
      });
    });
  }

  logOut(){
      firebase.auth().signOut();
  }



 render(){
  let successfulUser;


  if(this.state.user){
    successfulUser=(
    <div>
      <Router>
        <AppBar position="static">
          <Toolbar>
            <Link to="/"><Typography variant="h6" style={{color:'white', padding:'5px'}}>マイページ</Typography></Link>
            <Link to="/form"><Typography variant="h6" style={{color:'white', padding:'5px'}}>投稿フォーム</Typography></Link>
            <Link to="/show"><Typography variant="h6" style={{color:'white', padding:'5px'}}>投稿一覧</Typography></Link>
            <Button variant="contained" color="secondary" onClick={this.logOut} style={{color:'white', padding:'10px'}}>ログアウト</Button> 
          </Toolbar>
        </AppBar>

        <Switch>
          <Route exact path="/">     
           <Mypage/>     
          </Route>

          <Route path="/form">
           <Form />
          </Route> 

          <Route path ="/show">
           <Show />
          </Route>
        </Switch>
      </Router>
     </div>
    );
    }else{
      successfulUser=(
      <Authentication/>
      );
    }
    
     return(
      <div>
       {successfulUser}
      </div>      
    );
  }
}
export default App;
```
```jsx:Authentication.js
import React from 'react';
import firebase from "firebase/app";
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';

const uiConfig = {
    signInFlow: 'popup',
    signInSuccessUrl: "/",
    signInOptions: [
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.EmailAuthProvider.PROVIDER_ID,
    ],
}


const Authentication = (props) => {
    return (
        <div>
          <p>Please sign-in:</p>
          <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} />
        </div>
    );
}
export default Authentication;
```

```jsx:Show.js
import React from 'react';
import './App.css';
import "firebase/auth";
import "firebase/firestore";

const Show = (props) =>{
    return(
        <h1>Hello</h1>
    );
}  
export default Show;
```

MypageとFormとShowの中身はなんでも良しです。

また誤りがあれば、都度訂正していきます。