2017-12-03 46 views
0

ユーザーがログインしている場合にリダイレクトをトリガーしようとしています。ログインが成功するとthis.state.userが更新されますので、リダイレクトcomponentDidUpdate()または別のライフサイクルメソッドでリアクションルータ(v4)がcomponentDidUpdate()でリダイレクトされない

ifステートメントは私が意図したときに呼び出されていますが、リダイレクトは何もしません。どのように私はこれを修正することができますか?私はちょうどリダイレクトを使用する必要はありませんので、これをURLを更新するだけです。

私は現在ユーザー認証を使用していないため、まだ追加するつもりはありません。

import React, { Component } from "react"; 
import "./App.css"; 

import { BrowserRouter as Router, Route, Redirect } from "react-router-dom"; 
import AuthContainer from "./components/AuthContainer"; 
import ChatSelector from "./components/ChatSelector"; 
import { debug } from "util"; 
// import ChatRoomContainer from './components/ChatRoomContainer'; 

class App extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     user: {} 
    }; 
    } 

    setUser = user => { 
    console.log("setting user"); 
    this.setState({ user }); 
    }; 

    componentDidUpdate() { 
    // if a user is logged in, redirect them to chat-selector 
    if (Object.keys(this.state.user).length > 0) { 
     console.log(this.state.user); 
     <Router> 
     <Redirect to="/chat-selector" />; 
     </Router>; 
    } 
    } 

    render() { 
    return (
     <Router> 
     <div> 
      <Route 
      exact 
      path="/" 
      render={props => (
       <AuthContainer {...props} setUser={this.setUser} /> 
      )} 
      /> 
      <Route 
      exact 
      path="/chat-selector" 
      render={props => <ChatSelector {...props} user={this.state.user} />} 
      /> 
      {/* <Route exact path='/chatroom' component={ChatRoomContainer}/> */} 
     </div> 
     </Router> 
    ); 
    } 
} 

export default App; 
+0

私は、if文がrender()メソッド内に入る必要があると考えています。私はこれを動作させる場合、更新を1回/投稿します。 – dkershaw

+0

コンポーネント 'state'を変更し、' render'と 'redirect'でそれをキャッチします。 – cowCrazy

答えて

0

これを解決するには、ifステートメントをrender内に置き、リダイレクトブール値をstateに追加します。

import React, { Component } from "react"; 
import "./App.css"; 

import { 
    BrowserRouter as Router, 
    Route, 
    Redirect, 
    withRouter 
} from "react-router-dom"; 
import AuthContainer from "./components/AuthContainer"; 
import ChatSelector from "./components/ChatSelector"; 
import { debug } from "util"; 
// import ChatRoomContainer from './components/ChatRoomContainer'; 

class App extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     user: {}, 
     redirect: false 
    }; 
    } 

    setUser = user => { 
    console.log("setting user"); 
    this.setState({ user }); 
    }; 

    redirect =() => { 
    this.setState({ redirect: true }); 
    }; 

    render() { 
    if (
     Object.keys(this.state.user).length > 0 && 
     this.state.redirect === true 
    ) { 
     this.setState({ redirect: false }); 
     console.log("logged in"); 
     return (
     <Router> 
      <Redirect to="/chat-selector" /> 
     </Router> 
    ); 
    } else { 
     console.log("not logged in"); 
    } 
    return (
     <Router> 
     <div> 
      <Route 
      exact 
      path="/" 
      render={props => (
       <AuthContainer 
       {...props} 
       setUser={this.setUser} 
       redirect={this.redirect} 
       /> 
      )} 
      /> 
      <Route 
      exact 
      path="/chat-selector" 
      render={props => <ChatSelector {...props} user={this.state.user} />} 
      /> 
      {/* <Route exact path='/chatroom' component={ChatRoomContainer}/> */} 
     </div> 
     </Router> 
    ); 
    } 
} 

export default App; 
関連する問題