React Router V4-路由更改的初始状态

Question

了解React Router时，我注意到从路由 a切换到b 时，组件将返回其初始状态。

为什么再次点击同一条路线（即从 a到a ）时不会出现同样的情况？

我该如何实现点击同一路线<NavLink/>的组件恢复到其原始状态的方式-应该/可以在React Router的onChange钩子上完成吗？

如果这是一种反模式，请向我说明如何完成以下工作：我不仅需要切换路由，而且要在用户选择< / strong>再次单击相同的路线。

下面是问题的摘要：

单击Cat <p/>标签应将其颜色更改为green，单击同一路线<NavLink to="/cat-view">cat</NavLink>应将cat颜色状态恢复为初始状态。即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);

这是一个code sandbox

Answer 1

由于您使用的是仅显示第一个匹配项的react-router Switch组件，因此当您从Route a 切换到 b ， 正在卸载；这会丢弃其所有状态，因此，如果您切换回 a ，则有一个全新的组件，该组件会获得您为其状态指定的初始值（例如，{{1}的false } Cat）。单击不会更改渲染的color的{​​{1}}会保留相同的元素，并且不会影响其状态。

如果要在单击其NavLink时更改状态，则需要明确地执行此操作。 您可以通过两种主要方式进行此操作：

• 将状态提升到父级，然后单击链接即可明确更改状态
• 更改元素的键以强制重新安装
• 为父母提供一种进入孩子并告知其重置状态的机制

这是您的沙箱的修改版本，可以演示所有这些内容：

Route演示了第一种方法。

我已将状态从NavLink移至Cat（Cat现在仅使用道具）。我还为Cat的cat添加了PetShop，将状态设置回onClick。

NavLink演示了第二种方法。

在组件具有许多自身状态并且如果再次单击链接时都希望将其全部重置的更复杂的情况下，这种方法会更好。

false演示了第三种方法。

这类似于Dog示例的key属性，但是不会引起重新安装。 Dog仅使用Bunny来使Bunny重设自身。为此，可能有几种技术方法。您只需要一种方法来通知孩子自己重置。