コンポーネント上のauth-workflowの例（ReactJS）を分割する

Question

私はReactjsで新しく、学習目的のためにいくつかのコンポーネントに例（https://reacttraining.com/react-router/web/example/auth-workflow）を分割しようとしました。私は1つのファイルにLoginコンポーネントを抽出してきたし、今私は3つのファイルがあります：

index.js：

import React from 'react'; 
import { render } from 'react-dom'; 
import { ReactRouter } from 'react-router-dom'; 
import { AuthExample } from './containers/AuthExample'; 

render(<AuthExample/>, window.document.getElementById('app')); 

AuthExample.js：

import React from 'react' 
import { 
    BrowserRouter as Router, 
    Route, 
    Link, 
    Redirect, 
    withRouter 
} from 'react-router-dom' 
import {Login} from '../components/Login' 

//////////////////////////////////////////////////////////// 
// 1. Click the public page 
// 2. Click the protected page 
// 3. Log in 
// 4. Click the back button, note the URL each time 

export class AuthExample extends React.Component { 

    render() { 
     return (<Router> 
      <div> 
       <AuthButton/> 
       <ul> 
        <li><Link to="/public">Public Page</Link></li> 
        <li><Link to="/protected">Protected Page</Link></li> 
       </ul> 
       <Route path="/public" component={Public}/> 
       <Route path="/login" component={Login}/> 
       <PrivateRoute path="/protected" component={Protected}/> 
      </div> 
     </Router>) 
    } 
} 

export const fakeAuth = { 
    isAuthenticated: false, 
    authenticate(cb) { 
     this.isAuthenticated = true 
     setTimeout(cb, 100) // fake async 
    }, 
    signout(cb) { 
     this.isAuthenticated = false 
     setTimeout(cb, 100) 
    } 
} 

const AuthButton = withRouter(({history}) => (
    fakeAuth.isAuthenticated ? (
     <p> 
      Welcome! 
      <button onClick={() => { 
       fakeAuth.signout(() => history.push('/')) 
      }}>Sign out 
      </button> 
     </p> 
    ) : (
     <p>You are not logged in.</p> 
    ) 
)) 

const PrivateRoute = ({component: Component, ...rest}) => (
    <Route {...rest} render={props => (
     fakeAuth.isAuthenticated ? (
      <Component {...props}/> 
     ) : (
      <Redirect to={{ 
       pathname: '/login', 
       state: {from: props.location} 
      }}/> 
     ) 
    )}/> 
) 

const Public =() => <h3>Public</h3> 
const Protected =() => <h3>Protected</h3> 

export default AuthExample 

Login.jsを：

import React from 'react' 

export class Login extends React.Component { 
    state = { 
     redirectToReferrer: false 
    } 

    login =() => { 
     fakeAuth.authenticate(() => { 
      this.setState({redirectToReferrer: true}) 
     }) 
    } 

    render() { 
     const {from} = this.props.location.state || {from: {pathname: '/'}} 
     const {redirectToReferrer} = this.state 

     if (redirectToReferrer) { 
      return (
       <Redirect to={from}/> 
      ) 
     } 

     return (
      <div> 
       <p>You must log in to view the page at {from.pathname}</p> 
       <button onClick={this.login}>Log in</button> 
      </div> 
     ) 
    } 
} 

アプリケーションはよく始めたが、私はhttp://localhost:8080/loginに行って、ボタンLoginを押したとき、私はエラーを得た：

Uncaught ReferenceError: fakeAuth is not defined 

私はそれを解決することができますか？おそらく私はそれのためにいくつかの特別な技術を使うべきでしょうか？

Answer 1

You forgot to import 'fakeAuth' in your Login component.

import {fakeAuth} from './AuthExample';