Google SignIn + React + React Router v2 ( http://blog.bati11.info/entry/2018/05/20/085324 )

App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, Link, Redirect } from 'react-router-dom';

const PrivateRoute = ({authenticated, render, ...rest}) => (
  authenticated ? (
    <Route {...rest} render={render} />
  ) : (
    <Route
      {...rest}
      render={props =>
        <Redirect
          to={{
            pathname: "/login",
            state: {from: props.location}
          }}
        />
      }
    />
  )
);

class App extends Component {
  state = {
    authenticated: false,
    gapi: null
  }
  componentDidMount() {
    this.downloadGoogleScript(this.initSignInButton)
  }
  downloadGoogleScript = (callback) => {
    const element = document.getElementsByTagName('script')[0];
    const js = document.createElement('script');
    js.id = 'google-platform';
    js.src = '//apis.google.com/js/platform.js';
    js.async = true;
    js.defer = true;
    element.parentNode.insertBefore(js, element);
    js.onload = () => callback(window.gapi);
  }
  initSignInButton = (gapi) => {
    gapi.load('auth2', () => {
      gapi.auth2.init({client_id: <CLIENT_ID>})
        .then(
          (result) => {
            if (result.isSignedIn.get()) {
              this.setState({authenticated: true, gapi})
            } else {
              this.setState({authenticated: false, gapi})
            }
          },
          (err) => console.error(err)
        );
    })
  }
  onSignIn = (googleUser) => {
    console.log('ID: ' + googleUser.getBasicProfile().getId());
    this.setState({authenticated: true})
  }
  onSignOut = () => {
    const auth2 = this.state.gapi.auth2.getAuthInstance();
    auth2.signOut().then(() => console.log('sign out'));
    this.setState({authenticated: false})
  }
  render() {
    if (!this.state.gapi) {
      return ('Loading...')
    }
    return (
      <Router>
        <Switch>
          <Route exact path="/" render={props => 
            <Top {...props} authenticated={this.state.authenticated} onSignOut={this.onSignOut} />
          }/>
          <Route path="/login" render={props =>
            <Login {...props} onSignIn={this.onSignIn} gapi={this.state.gapi} authenticated={this.state.authenticated} />
          }/>
          <PrivateRoute path="/private" authenticated={this.state.authenticated} render={props =>
            <div>プライベートなページ</div>
          }/>
        </Switch>
      </Router>
    )
  }
}
export default App;


class Login extends Component {
  componentDidMount() {
    if (this.props.gapi) {
      this.props.gapi.signin2.render('google-signin-button', {
        'onsuccess': this.props.onSignIn,
        'onfailure': (err) => console.error(err)
      });
    }
  }
  render() {
    if (this.props.authenticated) {
      const { from } = this.props.location.state || { from: { pathname: "/" } };
      return (<Redirect to={from} />)
    }
    return (
      <div>
        <h1>ようこそ！</h1>
        <div id="google-signin-button"></div>
        <Link to='/'>Topへ</Link>
      </div>
    )
  }
}

class Top extends Component {
  render() {
    if (this.props.authenticated) {
      return (
        <div>
          <h1>ログイン済み:Topページ</h1>
          <button onClick={this.props.onSignOut}>ログアウト</button>
        </div>
      )
    } else {
      return (
        <div>
          <h1>ログイン前:Topページ</h1>
          <Link to='/login'>サインイン</Link>
        </div>
      )
    }
  }
}