React Routeで認証時にリダイレクトしたい

Question

ご閲覧いただきましてありがとうございます。

ReactとFirebaseを使って、認証機能を実装しています。
ユーザーがログインしている状態で、Login画面に入ろうとした場合はHome画面にリダイレクトするような仕様を実装したいと考えています。その逆に、ログインしていない状態であれば逆のことをしたいと考えています。

firebase.auth().currentUserの情報を使って、ログイン状態の有無を判別しています。このユーザー情報は取得できているようですが、React Routerの <Redirect />コンポーネントが機能していません。

Login.js

import React from "react";
import firebase from "../config/firebase";

import Button from "@material-ui/core/Button";

import { withRouter, Redirect } from "react-router";

class Login extends React.Component {
  constructor(props) {
    super(props);
  }

  login = () => {
    const provider = new firebase.auth.GoogleAuthProvider();
    firebase.auth().signInWithRedirect(provider);

    this.props.history.push("/");
  };

  render() {
    return (
      <div>
        {firebase.auth().currentUser !== null ? (
          <Redirect to="/" />
        ) : (
          <Button variant="contained" color="primary" onClick={this.login}>
            Google Login
          </Button>
        )}
      </div>
    );
  }
}

export default withRouter(Login);

下記の記事を参考にしながら進めているのですが、何か足りない要素などがあるのでしょうか。
https://qiita.com/kuropp/items/daf69b0506a4a44f0a25

特にエラー文などはなく、リダイレクトが動いていないという状態です。

お手数ですがお知恵を拝借させていただけないでしょうか。

Answer 1

下記を設定すればいけました。

  async componentDidMount() {
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        this.props.history.push("/");
      } else {
        this.props.history.push("/login");
      }
    });
  }

ただし、 Router の書き方に命名規則があり、先にルートパスを書いてしまうとそちらに行ってしまうことが分かりました。今まであんまり気にしてなかったのですが。

class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <Switch>
            <Route path='/login' component={Login} />
            <Route path='/' component={Home} />
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}