Reaction路由器v6.0.0-Alpha.5历史道具删除-在Reaction上下文之外导航 [英] React Router v6.0.0-alpha.5 history prop removal - navigating outside of react context

问题描述

根据Reaction路由器的最新v6.0.0-alpha.5版本，已删除历史道具： https://github.com/ReactTraining/react-router/releases/tag/v6.0.0-alpha.5

删除了路由器历史道具，并移去了设置责任 向上/向下将监听程序(history.Listen)放入包装器 组件(<；浏览器路由器&>、<；哈希路由器&>等)。<；路由器&>现在是 受控组件，该组件仅为 应用程序。

使用useNavigate挂钩在Reaction上下文中导航非常简单。

但是，删除历史道具对以编程方式在Reaction上下文之外导航有何影响？ 例如，当我们不能再传递历史对象时，我们如何保持历史同步，以便从redux或axios/http拦截器等内部导航？ 当前的V5实施： https://reacttraining.com/react-router/web/api/Router

或者，从V6开始，目标是仅依赖于从Reaction组件内部导航吗？

推荐答案

谢谢您的提问，我们知道这个问题会经常出现。这是我们多年来一直得到的一个常见问题。当我们开始记录所有这些事情时，请耐心等待，我们有很多事情要做！

简而言之：通常情况下，人们使用thunk进行异步工作，这会导致想要导航到其他地方(在登录之后、在创建记录之后，等等)。点击成功后，将状态更改为类似"success"或"redirect"，然后使用Effect+导航：

export function AuthForm() {
  const auth = useAppSelector(selectAuth);
  const dispatch = useAppDispatch();
  const navigate = useNavigate();

  useEffect(() => {
    if (auth.status === "success") {
      navigate("/dashboard", { replace: true });
    }
  }, [auth.status, navigate]);

  return (
    <div>
      <button
        disabled={auth.status === "loading"}
        onClick={() => dispatch(login())}
      >
        {auth.status === "idle"
          ? "Sign in"
          : auth.status === "loading"
          ? "Signing in..."
          : null}
      </button>
    </div>
  );
}

更多说明：

例如，为了从Redux内部导航，我们如何保持历史记录同步

我们一直认为这是一种糟糕的做法，不情愿地提供了history对象作为第一类接口，以停止关于应用程序状态和URL😅的哲学对话。

但今天的情况有点不同。这场对话不再只是哲学上的，当与Reaction最近的异步渲染、流媒体和悬疑功能混合在一起时，也有一些具体的错误。为了保护React路由器应用程序不受URL同步错误的影响(开发人员对此无能为力)，V6不再公开历史对象。

希望这个解释能有所帮助：

更改URL是副作用，而不是状态。块用于执行副作用，这些副作用最终确定状态容器的某些状态，但不用于其本身的副作用(至少我是这样理解的)。

例如，您可能希望在Redux状态更改后更改页面上的焦点。您可能不会尝试通过Redux操作和状态始终同步和控制文档的焦点。滚动位置是相同的。归根结底，用户可以控制这些事情：他们可以按Tab键、点击某物或滚动。你的应用不会尝试拥有或同步该状态，它只是根据你所做的控制的操作和状态而不时更改它。

URL相同。用户可以在地址栏中输入他们想要的任何内容，点击后退、前进，甚至点击并按住后退按钮就可以后退3个条目！它的状态与焦点和滚动位置相同：归用户所有。容器永远不可能真正拥有URL状态，因为它无法控制围绕它的操作。混入Reaction的新功能和即将推出的功能，你就会输掉这场游戏。

简而言之：在UI；导航中更改Redux状态&>useEffect。希望这会有帮助！

这篇关于Reaction路由器v6.0.0-Alpha.5历史道具删除-在Reaction上下文之外导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！