Почему мой компонент с предыдущей страницы перерисовывается после смены страниц с помощью маршрутизатора?

Question

Когда я делаю ссылку с одной страницы на другую, компонент с предыдущей страницы остается на странице после перехода на новую страницу. Я начинаю с целевой страницы и перехожу на страницу результатов, используя this.props.history.push ('/ results'). На странице результатов отображается другой компонент с именем BarChart. После завершения рендеринга я нажимаю ссылку, по которой я возвращаюсь на целевую страницу. После возврата на целевую страницу компонент целевой страницы визуализируется, но BarChart также остается на странице

Я перепробовал все решения, которые мог найти, такие как обертывание моего приложения с BrowserRouter, Switch, обертывание моих экспортированных компонентовиспользование 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);

Answer 1

Вам просто нужно изменить порядок ваших маршрутов:)

<Switch>
  <Route exact path="/" component={() => <LandingPage />} />
  <Route exact path="/results" component={() => <ResultsPage />} />
</Switch>

"каждый, который соответствует местоположению, рендерится включительно" - https://reacttraining.com/react-router/web/api/Switch