React Router V4 — исходное состояние при изменении маршрута

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

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

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

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

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

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

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

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

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

  function ChangeColor() {
    setColor(true);
  }

  console.info(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.info("cat route changed")}
            />
            <Route
              path = "/dog-view"
              render = {() => <Dog/>}
              onChange = {console.info("dog route changed")}
            />
          </Switch>
        </div>
      </Router>
    );
  }
}

export default withRouter(PetShop);

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