React路由器（v4）不重定向在componentDidUpdate（）

Question

我試圖如果用戶登錄觸發重定向。成功的登錄觸發此this.state.user的更新，所以我想處理重定向在componentDidUpdate（）或另一個生命週期方法中。

當我打算這樣做時，if語句會被調用，但重定向什麼也不做。任何想法如何我可以解決這個問題？我只是想要更新網址，所以它不一定需要使用重定向。

我目前沒有使用用戶認證，也不打算添加它。

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; 

Answer 1

我通過將內作出的if語句，並添加重定向布爾州解決了這個。

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;