React Router V4 - начальное состояние при изменении маршрута

Question

Узнав о React Router, я заметил, что компонент переходит в исходное состояние при переключении с маршрута a на b .

Почему этого не происходит при повторном нажатиина том же маршруте, т.е. от a до ?

Как я могу реализовать способ, при котором щелкнув по тому же маршруту <NavLink/>, компонент возвращается в исходное состояние - следует / можно ли это сделатьна onChange перехват React Router?

Если это анти-паттерн, пожалуйста, расскажите мне, как еще я могу сделать следующее: мне нужно, чтобы мой компонент вернулся в исходное состояние не только при переключении маршрутовно также и в случае, если пользователь выбирает , чтобы снова щелкнуть по тому же маршруту.

Ниже приведена абстракция проблемы:

Нажатие на Cat <p/>тег должен изменить свой цвет на green, щелкнув по тому же маршруту <NavLink to="/cat-view">cat</NavLink> должен вернуть цвет кошки обратно в исходное состояние.то есть color: false

Точно так же, как при переключении с маршрута a на b (в моем случае кошка на собаку)

// Cat Component
import React, { useState } from "react";

export const Cat = () => {
  const [color, setColor] = useState(false);

  function ChangeColor() {
    setColor(true);
  }

  console.log(color)

  return (
    <p onClick={ChangeColor}>
      Click on this <span className={color ? "green" : " "}>Cat</span>
    </p>
  );
};

import {
  BrowserRouter as Router,
  Route,
  NavLink,
  Switch,
  withRouter,
  browserHistory
} from "react-router-dom";

// Main Component
class PetShop extends Component {
  state = {};

  render() {
    return (
      <Router history={browserHistory}>
        <div>
          <ul>
            <li>
              <NavLink to="/">home</NavLink>
            </li>
            <li>
              <NavLink to="/cat-view">cat</NavLink>
            </li>
            <li>
              <NavLink to="/dog-view">dog</NavLink>
            </li>
          </ul>

          <Switch>
            <Route
              path="/cat-view"
              render={() => <Cat/>}
              onChange={console.log("cat route changed")}
            />
            <Route
              path="/dog-view"
              render={() => <Dog/>}
              onChange={console.log("dog route changed")}
            />
          </Switch>
        </div>
      </Router>
    );
  }
}

export default withRouter(PetShop);

вот это код песочница

Answer 1

Поскольку вы используете компонент реакции-маршрутизатора Switch, который отображает только первое совпадение, при переключении с маршрута a на b , a демонтируется; это отбрасывает все его состояние, поэтому если вы переключитесь обратно на a , у вас будет совершенно новый компонент, который получит начальное значение, которое вы указали для его состояния (например, false для Cat color) , Нажатие на NavLink, которое не меняет визуализированный Route, оставляет тот же элемент на месте и не влияет на его состояние.

Если вы хотите изменить состояние, когда вы нажимаете на NavLink, то вам нужно сделать это явно. Есть два основных способа сделать это:

• поднять состояние до родительского и явно изменить его по клику по ссылке
• изменить ключ элемента для принудительного перемонтирования
• обеспечивает механизм для родителя, чтобы достигнуть ребенка и сказать ему, чтобы сбросить его состояние

Вот модифицированная версия вашей песочницы, которая демонстрирует все это:

Cat демонстрирует первый подход.

Я переместил состояние с Cat до PetShop (Cat теперь использует только реквизит). Я также добавил onClick к NavLink для кота, который возвращает состояние false.

Dog демонстрирует второй подход.

Этот подход будет лучше работать в более сложном сценарии, когда компонент имеет множество своего собственного состояния, и вы хотите, чтобы все было сброшено, если вы снова нажмете на ссылку.

Bunny демонстрирует третий подход.

Это похоже на свойство ключа для примера Dog, но не вызывает перемонтажа. Bunny просто использует resetIndex в эффекте, чтобы Bunny сам себя сбросил. Есть, вероятно, несколько технических подходов для этого. Вы просто хотите, чтобы ребенок дал сигнал сбросить себя.