javascript - React Router v6.0.0-alpha.5 历史 Prop 删除 - 在 react 上下文之外导航

Question

根据 react router 的最新 v6.0.0-alpha.5 版本，history 属性已被移除:
https://github.com/ReactTraining/react-router/releases/tag/v6.0.0-alpha.5

Removed the <Router history> prop and moved responsibility for setting up/tearing down the listener (history.listen) into the wrapper components (<BrowserRouter>, <HashRouter>, etc.). <Router> is now a controlled component that just sets up context for the rest of the app.

使用 useNavigate 在 react 上下文中导航很简单钩。

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

或者，从 v6 开始，目标是否仅依赖于从 react 组件内部导航？

Answer 1

谢谢你的问题，我们知道这会出现很多。这是我们多年来遇到的一个常见问题。当我们开始记录所有这些类型的事情时，请耐心等待我们，还有很多事情要做!
简短的回答:通常人们使用 thunk 进行异步工作，导致想要在其他地方导航(登录后，创建记录后等)。当您的 thunk 成功时，将状态更改为类似于 "success"或 "redirect"然后 useEffect + 导航:

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>
  );
}

多一点解释:

For example, how would we keep our history in sync in order to navigate from inside redux

我们一直认为这是一种不好的做法，因此很不情愿地提供了 history对象作为一流的 API，以停止关于应用程序状态和 URL 的哲学对话😅。
但今天情况有些不同。对话不再只是哲学性的，而且在与 React 最近的异步渲染、流式传输和悬念特性混合时会出现一些具体的错误。为了保护 react 路由器应用程序免受与 URL 同步错误(开发人员无法做任何事情)，v6 不再公开历史对象。
希望这个解释会有所帮助:
更改 URL 是一种副作用，而不是状态。 Thunks 用于执行副作用，最终找出状态容器的某些状态，但不用于其本身的副作用(至少这是我的理解)。
例如，您可能希望在 redux 状态更改后更改页面上的焦点。您可能不会一直尝试通过 redux 操作和状态来同步和控制文档的焦点。滚动位置相同。最终，用户可以控制这些事情:他们可以按 Tab 键、单击某物或滚动。您的应用不会尝试拥有或同步该状态，它只是不时更改它以响应您控制的操作和状态。
网址是一样的。用户可以在地址栏中输入任何他们想要的内容，单击后退，前进，甚至单击并按住后退按钮以返回 3 个条目!它与焦点和滚动位置的状态相同:归用户所有。容器永远无法真正拥有 URL 状态，因为它无法控制围绕它的操作。混入 React 的新功能和即将推出的功能，你就会输掉这场比赛。
简而言之:更改 redux 状态 > UI 中的 useEffect > 导航。希望有帮助!