React Router |Как восстановить исходное состояние

Question

Не могли бы вы помочь мне понять, связано ли правильное исправление с React Router или React?

Я бы хотел иметь возможность сбросить состояние (не уверен, что это правильный термин), каждый раз, когда пользователь снова попадает на тот же маршрут.

У меня есть прототип, который проверяет либо правильный цвет , либо правильную стоимость данного автомобиля.

Моя проблема , как вы увидите ниже, заключается в том, что каждый раз, когда я прохожу один и тот же маршрут и / или мой метод случайного воспроизведения. Мой список, который контролирует состояние для отображения / скрытия и color , не сбрасывается сам.

У меня есть отдельные маршруты рендеринга <Cost/> и <Color/> компонента

export const Routes = ({ state, shuffle }) => (
  <Switch>
    <Route
      path="/car-cost"
      render={() => <Cost {...state} shuffle={shuffle} />}
    />
    <Route
      path="/car-color"
      render={() => <Color {...state} shuffle={shuffle} />}
    />
  </Switch>
);

Затем я передаю маршруты в мой основной родительский компонент. то есть:

// MAIN PARENT COMPONENT
export default class Dealership extends Component {
  state = {
    cars: [
      { name: "Ferrari", cost: "$9.000", color: "red", id: 1 },
      { name: "Porsche", cost: "$8.000", color: "black", id: 2 },
      { name: "lamborghini", cost: "$7.000", color: "green", id: 3 },
      { name: "McLaren", cost: "$6.000", color: "silver", id: 4 },
      { name: "Corolla", cost: "$50", color: "brown", id: 5 },
      { name: "Prius", cost: "$40", color: "beige", id: 6 },
      { name: "Saab", cost: "$30", color: "navy blue", id: 7 }
    ]
  };

  handleShuffle = () => {
    this.setState({
      cars: [...this.state.cars.sort(() => Math.random() - 0.5)]
    });
  };

  render() {
    return (
      <BrowserRouter>
        <div>
          <Navigation />
          <Routes
            state={this.state}
            shuffle={this.handleShuffle}
          />
        </div>
      </BrowserRouter>
    );
  }
}

В приведенном ниже примере показан компонент <Cost />:

// QUESTION COMPONENT
const Question = ({ guess }) => <h1>What car is {guess}</h1>;

// COST COMPONENT
export default class Cost extends Component {
  render() {
    const { cars, shuffle } = this.props;
    const correctIndex = Math.floor(Math.random() * (cars.length - 1));
    const correctCar = cars[correctIndex];

    const car = cars.map(car => (
      <CarList
        key={car.id}
        name={car.name}
        guess={car.cost}
        isCorrect={correctCar.cost === car.cost}
        greet={this.onGreet}
      />
    ));

    return (
      <>
        <Question key={correctCar.id} guess={correctCar.cost} />
        <button onClick={shuffle}>go again</button>
        <ul className="car-list">{car}</ul>
      </>
    );
  }
}

По существу, вышеприведенный Компонент получает список, и <CarList/> управляет состоянием для отображения и отображения цвета , если стоимость автомобиля совпадает с тем, который запрашивается на <Question /> компонент

// CAR LIST COMPONENT
export default class CarList extends Component {
  state = {
    show: false
  };

  handleShow = () => {
    this.setState({ show: true });
  };

  getColor = () => {
    if (this.state.show) {
      if (this.props.isCorrect) {
        return "green";
      } else {
        return "red";
      }
    }

    return "";
  };

  render() {
    const { name, guess } = this.props;
    const { show } = this.state;
    return (
      <li onClick={() => this.handleShow()} className={this.getColor()}>
        {name}
        <span className={show ? "show" : "hide"}>{guess}</span>
      </li>
    );
  }
}

Я обрабатываю состояние для отображения и управления цветами внутри <Carlist/> компонента, чтобы каждый <li/> мог прослушивать событие щелчка и вести себя соответственно.

Проблема, как вы можете видеть здесь, в этой [песочнице кода] [1] в том, что каждый раз, когда я сталкиваюсь с одним и тем же маршрутом или моим методом handleShufle(), рандомизация происходит соответственно, но состояние <CarList/> остается прежним.

Как я могу вернуть его в исходное состояние при нажатии на ту же маршрутную ссылку?