Question

我正在构建一个Web应用程序。用户可以从Firebase中读取有关对象的一些信息。问题在于用户也可以使用Android应用程序登录，并且如果Firebase上的属性已更改，则需要将其从Web应用程序的当前视图中踢出。我知道如何完成这项任务。这是代码：

var AssignedWordRef = firebase.database().ref('Users').child(currentUser.uid).child('assignedWork');
AssignedWordRef.on('value', snapshot => {
    var assignmentId = snapshot.val();
    if (assignmentId === null) {
        console.log('Redirect right here mate');
    }
});

这有效。它是控制台日志，一切都很好。但是问题是我需要将用户重定向到其他路径。到目前为止，我使用了window.location，但这不是一个好主意。这是我的Routes：

<Switch>
    <Route exact path="/assignments" render={
        () => (firebase.auth().currentUser === null ?
            <Redirect to='/'/> : this.state.assignedWord === undefined ?
                <AssignmentsComponent/> :
                <Redirect to={'/assignment/' + this.state.assignedWord}/>)
    }/>

    <Route exact path='/assignment/:id' render={
        props => (
            firebase.auth().currentUser === null ?
                <Redirect to='/'/> : <CheckIfHasCurrentTasksComponent {...props}/>)
    }/>

    <Route exact path='/userPanel' render={
        () => (firebase.auth().currentUser === null ?
            <Redirect to='/'/> : <UserPannelComponent/>)
    }/>

    <Route exact path="/" component={HomeComponent}/>
</Switch>

我尝试返回<ComponentToRedirectTo/>所在的console.log，但是没有运气。

返回<Redirect to='/assignments'/>也无济于事。我的猜测是我必须将其放入Route，但我不知道如何。

Answer 1

对this.props.history使用push或仅使用Redirect。这是来自another answer的示例代码（请记住使用this.setState）以执行新的渲染：

class MyComponent extends React.Component {
  state = {
    redirect: false
  }

  handleSubmit () {
    axios.post(/**/)
      .then(() => this.setState({ redirect: true }));
  }

  render () {
    const { redirect } = this.state;

     if (redirect) {
       return <Redirect to='/somewhere'/>;
     }

     return <RenderYourForm/>;
}

Answer 2

您可以尝试使用this.props.history.push('/');而不是使用<Redirect to='/' />

希望这会起作用！

在React

2 个答案: