渲染前如何清屏

Question

在使用 react 开发实时墙板时发现问题。我以 3 秒的时间间隔依次显示 2 个组件 Dashboard1（一个包含数据的表）、Dashboard2（另一个包含数据的表）。我的父组件是 Dashboard，它连接到我的 Firestore DB 以接收实时更新并将此数据发送到 Dashboard1 组件，然后 Dashboard 1 呈现其数据，并在 3 秒后调用 Dashboard2，并使用 Dashboard 使用 props.history 传递给它的相同数据.push()。我在这里看到 2 个问题。组件 Dashboard 2 始终呈现在 Dashboard1 上方。就像我向下滚动页面时一样，我仍然可以在底部看到 Dashboard1。如何在渲染 Dashboard1 和 2 之前清除页面。这样我一次只能在屏幕上看到一个组件。下面是我的 App、Dashboard、Dashboard1 和 Dashboard2 的代码。我还看到 Dashboard 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

你需要使用 switch，它只会像这样渲染给定集合的一个路由

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>
    )
  }
}

查看文档here