Как очистить экран перед рендерингом

Question

Видение проблем при разработке настенного дисплея в реальном времени с использованием реакции.Я отображаю 2 компонента один за другим Dashboard1 (таблица с данными), Dashboard2 (еще одна таблица с данными) с интервалом времени 3 секунды.Мой родительский компонент - Dashboard, он подключается к моей базе данных Firestore для получения обновлений в реальном времени и отправляет эти данные в компонент Dashboard1, а затем Dashboard 1 визуализирует свои данные и через 3 секунды вызывает Dashboard2 с теми же данными, переданными ему Dashboard с помощью props.history..push (). Я вижу 2 проблемы здесь.Компонент Dashboard 2 всегда отображается выше Dashboard1.Как когда я прокручиваю страницу вниз, я все равно вижу Dashboard1 внизу.Как очистить страницу перед рендерингом Dashboard1 и 2. Так что я просто вижу один компонент за раз на экране. Ниже приведен мой код для App, Dashboard, Dashboard1 и Dashboard2. Я также вижу, что Dashboard 2 визуализируется несколькораз в логах консоли.Пожалуйста, помогите мне решить эти 2 проблемы:

App.js:
import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom'
import Dashboard from './components/Dashboard'
import Dashboard1 from './components/Dashboard1'
import Dashboard2 from './components/Dashboard2'



class App extends Component {
  render() {
    console.log('App')
    return (
      <BrowserRouter>
        <div className="App">
          <Route exact path='/' component={Dashboard} />
          <Route exact path='/Dashboard1' component={Dashboard1} />
          <Route exact path='/Dashboard2' component={Dashboard2} />
          <Dashboard />
       </div>
      </BrowserRouter>
    )
  }
}

export default(App)

Dashboard.js:
import React, { Component } from 'react';
import { BrowserRouter, Route, Redirect } from 'react-router-dom'
import Dashboard1 from './Dashboard1'
import Dashboard2 from './Dashboard2'
import { connect } from 'react-redux'
import { firestoreConnect } from 'react-redux-firebase'
import { compose } from 'redux'



class Dasboard extends Component {

  render() {
    console.log('Dashboard')
    const { agents } = this.props

    if (!agents) {
      return null
    }
    return (
      <Dashboard1 data={agents}/>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    agents: state.firestore.data.agent_groups
  }
}


export default compose(
  connect(mapStateToProps),
  firestoreConnect([
    { collection: 'agent_groups' }
  ])
)(Dasboard)

Dashboard1.js:
import React from 'react'
import Table from '../layouts/Table'
import { withRouter } from 'react-router-dom'



const Dashboard1 = (props) => {
  console.log('Dashboard1')
  setTimeout(() => {
    props.history.push({
      pathname: '/Dashboard2',
      state: { data: props.data.WFM_Inbound_Sales.agents }})

  }, 3000);
  return (
    <div className="dashboard1">
      <Table
        data={props.data.WFM_Inbound_Sales.agents}  
        headers={[
            {
              name: 'Agent',
              prop: 'name'
            },
            {
              name: 'Total calls',
              prop: 'InboundCalls'
            }
          ]}
      />
    </div>
  )
}

export default withRouter(Dashboard1)

Dashboard2.js:
import React from 'react'
import Table from '../layouts/Table'
import { withRouter } from 'react-router-dom'


const Dashboard2 = (props) => {
  console.log('Dashboard2')
  setTimeout(() => {
    props.history.push('/')
  }, 3000);
  return (
    <div className="dashboard2">
      <Table
        data={props.location.state.data}
        headers={[
          {
            name: 'Agent',
            prop: 'name'
          },
          {
            name: 'Status',
            prop: 'state'
          },
          {
            name: 'Time in status',
            prop: 'TimeInCurrentState'
          }
        ]}
      />
    </div>
  )
}

export default withRouter(Dashboard2)

Answer 1

Вам нужно использовать переключатель, который будет отображать только один маршрут из данного набора, как этот

class App extends Component {
  render() {
    console.log('App')
    return (
      <BrowserRouter>
        <div className="App">
          <Switch>
            <Route exact path='/' component={Dashboard} />
            <Route exact path='/Dashboard1' component={Dashboard1} />
            <Route exact path='/Dashboard2' component={Dashboard2} />
          </Switch>
          <Dashboard />
       </div>
      </BrowserRouter>
    )
  }
}

Проверьте документ здесь