FacebookログインとReactJSでログインとログアウトを実装する方法は？

Question

私はReactとReact-Routerを使用して、ユーザーがWebアプリにログインしてからFacebookにログインしようとしています。ログインに成功したユーザーをリダイレクトするコンポーネントを作成しましたが、新しいビューでログアウトボタンを表示できません。私はReact-Routerも新しくなっていますので、問題が私のルートにあるかどうかは完全にはわかりません。ここに私のこれまでのコードだ

：

login.js

class Login extends React.Component{ 
    constructor(props) { 
     super(props); 
     this.state = { 
      loggedStatus: false, 
      id : '' 
     } 
    } 

    componentDidMount() { 
     window.fbAsyncInit = function() { 
      window.FB.init({ 
       appId  : '', 
       cookie  : true, 
       xfbml  : true, 
       version : 'v2.11' 
      }); 

      window.FB.getLoginStatus(function(response) { 
       this.statusChangeCallback(response); 
      }.bind(this)); 
     }.bind(this); 

     (function(d, s, id) { 
      var js, fjs = d.getElementsByTagName(s)[0]; 
      if (d.getElementById(id)) return; 
      js = d.createElement(s); js.id = id; 
      js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.11&appId=''"; 
      fjs.parentNode.insertBefore(js, fjs); 
     }(document, 'script', 'facebook-jssdk')) 
    } 

    loggedIn(response) { 
     this.setState({ 
      loggedStatus : true, 
      id: response.authResponse.userID   
     });   
    } 

    loggedOut() { 
     this.setState({ 
      loggedStatus: false, 
     }) 
    } 

    statusChangeCallback(response) { 
     console.log('statusChangeCallback'); 
     console.log(response); 
     if (response.status === 'connected') { 
     this.loggedIn(response) 
     console.log(this.state); 
     } else if (response.status === 'not_authorized') { 
     this.loggedOut() 
     console.log(this.state.loggedStatus); 
     } else { 
     this.loggedOut() 
     console.log(this.state.loggedStatus); 
     } 
    } 

    checkLoginState() { 
     window.FB.getLoginStatus(function(response) { 
     this.statusChangeCallback(response); 
     }.bind(this)); 
    } 

    handleClick() { 
     window.FB.login(this.checkLoginState()); 
    } 

    render() { 
     if (!this.state.loggedStatus) { 
     return (
      <div className="fb-login-button" 
       data-max-rows="1" 
       data-size="large" 
       data-button-type="continue_with" 
       data-show-faces="false" 
       data-auto-logout-link="true" 
       data-use-continue-as="true"> 
      </div> ); 
     } else { 
      return (
       <Redirect to = {{ 
        pathname : '/loggedin', 
        state : { 
         id: this.state.id 
        } 
       }} /> 
      ) 
     } 
    } 

} 

export default Login; 

loggedin.js

class UserLogin extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      id: this.props.location.state.id 
     } 
    } 
    render(){ 
     return (
    <div>Hey {this.state.id}!</div> 
    </div>) 

    } 
} 

export default UserLogin 

そして、ここでは私のメインのアプリですが、App.js

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

export default App; 

Answer 1

それから私はあなたに問題があると思いますルータセットアップ。

//Solution suppose you are using creat-react-app 
 
//At index.js of you app put this. 
 
//other import. 
 

 
//install history package from npm 
 

 
import { createBrowserHistory } from 'history'; 
 

 
const history = createBrowserHistory(); 
 

 

 
ReactDOM.render(
 
     <Router history ={history}> 
 
      <App/> 
 
     </Router>, 
 
document.getElementById('root')); 
 
registerServiceWorker();

//at app.js file 
 
//other required import 
 
import { BrowserRouter, Route } from "react-router-dom"; 
 

 
//import your two component here 
 

 

 

 
class App extends Component { 
 
    render() { 
 
    return (
 
     <BrowserRouter> 
 
     <div> 
 
      <Route exact path="/login" component={Login} /> 
 
      <Route exact path="/loggedin" component={Loggedin} /> 
 
     </div> 
 
     </BrowserRouter> 
 
    ); 
 
    } 
 
} 
 

 
export default App;

// Inside Login component 
 
// Use componentDidMount life cycle hook to redirect. 
 

 

 
componentDidMount(){ 
 
    //other logic and at last... 
 
    if(this.state.id !== null){ 
 
    const {history} = this.props; 
 
    history.push('/loggedin') //redirection link if user is already logged in. 
 
    } 
 
    
 
}