为什么使用路由器更改页面后，我的上一页面的组件会重新呈现？

Question

当我从一个页面链接到另一页面时，上一页的组件在切换到新页面后仍保留在该页面上。我从登录页面开始，然后使用this.props.history.push（'/ results'）切换到结果页面。在结果页面上，将渲染另一个名为BarChart的组件。渲染完成后，我点击链接，该链接使用使我返回到登录页面。返回登录页面后，将呈现登录页面组件，但BarChart仍保留在页面上]

我已经尝试了所有可以找到的解决方案，例如用BrowserRouter包装我的应用程序，切换，使用withRouter包装导出的组件等。

App.js：

import {
  BrowserRouter as Router,
  ...
}

const App = () =>
  <Router>
    <Switch>
      <Route exact path={routes.RESULTS} component={() => <ResultsPage />} />
      <Route exact path={routes.LANDING} component={() => <LandingPage />} />
    </Switch>
  </Router>

export default App;

我的3个组件：

landing.js：

class LandingPage extends Component {

  ...

  //how I handle switching to results page/component:
  handleSubmit(event){
    event.preventDefault();
    get_data(this.state.search);
    const { history } = this.props;
    history.push("/results");
  }

...

export default compose(
  withRouter,
  connect(mapStateToProps),
)(LandingPage);

results.js：

import BarChart from './barchart';

class ResultsPage extends Component {

  constructor(props){
    super(props);
  }

  render() {

    ...

    //routes.LANDING = '/'


    return (
      <div>
      <Link to={routes.LANDING}>Back to landing page</Link>
      <BarChart width={width} height={height}/>
      </div>
      );
  }
}

export default compose(
  withRouter,
  connect(mapStateToProps),
)(ResultsPage);

barchart.js：

class BarChart extends Component {

  constructor(props){
    super(props);
    this.drawChart = this.drawChart.bind(this);
  }

  drawChart() {

    ...

  }

  render() {

    this.drawChart();
    return (
        <div>
        <svg></svg>
        </div>
        );
  }

}

const mapStateToProps = (state) => ({
  data: state.dataState.data,

});

export default compose(
  withRouter,
  connect(mapStateToProps),
)(BarChart);

当我从一个页面链接到另一页面时，上一页的组件在切换到新页面后仍保留在该页面上。我从登录页面开始，然后使用this.props ....

Answer 1