Перенаправление пользователя на другой путь в React

Question

Я создаю веб-приложение. Пользователь может пойти и прочитать некоторую информацию об объекте из Firebase. Проблема в том, что пользователь также может войти в систему с помощью приложения Android, и если свойство Firebase изменяется, его нужно исключить из его текущего представления в веб-приложении. Я знаю, как это сделать. Это код:

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

Используйте push с this.props.history или просто используйте Redirect. Это пример кода из другого ответа (не забудьте использовать 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='/' />

Надеюсь, это сработает!