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

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

为什么在同一路线上再次点击时不会发生同样的情况，即 a 到 a ？

我怎样才能实现一种方法，即单击同一路由 <NavLink/> 组件恢复到其原始状态 - 应该/可以在 React Router 的 onChange Hook 上完成吗？

如果这是一个反模式，请教我如何完成以下操作:我需要我的组件不仅在切换路由时恢复到原始状态，而且在 用户选择 以单击相同的情况下再次路由。

下面是问题的摘要:

单击 Cat <p/> 标签应将其颜色更改为 green ，单击同一路线 <NavLink to="/cat-view">cat</NavLink> 应将 cat 颜色状态恢复为其初始状态。即 color: false
就像从路由 a 切换到 b 时所做的一样(在我的情况下是 cat 到 dog)

// 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

最佳答案

由于您使用的是仅呈现第一个匹配项的 react-router Switch 组件，因此当您从 Route a 切换到 b 时， a 将被卸载；这会抛出它的所有状态，所以如果你切换回 你有一个全新的组件，它获得你为其状态指定的初始值(例如 false 为 Cat color )。单击不更改渲染的 NavLink 的 Route 会保留相同的元素，并且对其状态没有影响。

如果您想在单击其 NavLink 时更改状态，那么您需要明确地这样做。
有两种主要方法可以做到这一点:

将状态提升到父级，并在单击链接时显式更改

更改元素的键以强制重新安装

为父进程提供了一种机制来访问子进程并告诉它重置其状态

这是您的沙箱的修改版本，演示了所有这些:


Cat 演示了第一种方法。

我已经将状态从 Cat 移动到 PetShop (Cat 现在只使用 Prop )。我还在 cat 的 onClick 中添加了一个 NavLink ，将状态设置回 false 。
Dog 演示了第二种方法。

这种方法在更复杂的情况下会更有效，在这种情况下，组件有很多自己的状态，如果再次单击链接，您希望所有状态都重置。
Bunny 演示了第三种方法。

这类似于 Dog 示例的 key 属性，但不会导致重新挂载。 Bunny 只是在效果中使用 resetIndex 导致 Bunny 重置自身。这可能有几种技术方法。您只需要一种方法来通知 child 自行重置。

关于javascript - React Router V4 - 路由更改的初始状态，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54315157/