渲染前触发导航

Question

我有the following code that redirects automatically to the About component when you load the FAQ component。这是使用自定义钩子完成的，该钩子使用useHistory() 将新路由推送到它。自定义钩子还返回一个空对象。当您不尝试使用此对象中的任何内容时，代码会完美运行，并且应用程序会重定向到 About 组件。

但是当我尝试从对象访问（不存在的）值时，我得到了value is null 错误。我不明白为什么代码甚至达到了这一点。重定向不应该在组件的其余部分被渲染之前发生吗？

import React from "react";
import "./styles.css";

import { Link, BrowserRouter, Route, useHistory } from "react-router-dom";

export default function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Link to="/about">About</Link>
        <Link to="/faq">FAQ</Link>
        <Route path="/about" component={About} />
        <Route path="/faq" component={FAQ} />
      </BrowserRouter>
    </div>
  );
}

function useRedirect() {
  const history = useHistory();
  history.push("/about");
  return {};
}

function FAQ() {
  const { value } = useRedirect();
  return <h1>FAQ {value.name}</h1>;
}

function About() {
  return <h1>About</h1>;
}

为什么在访问value之前没有发生重定向？以及如何确保我的应用在访问 value 之前重定向？

Answer 1

为什么在访问值之前没有发生重定向？如何 我可以确保我的应用在访问该值之前重定向吗？

重定向确实发生在值被访问之前，但这并不意味着重定向代码下面的其他源代码不会被执行。这就是它在客户端路由中的方式。

function TestComponent() {
  const history = useHistory();
  history.push("/about");
  setTimeout(()=>{
    console.log("foo"); // <-- will get executed regardless
  }, 3000)

  return "";
}

如果您要执行，例如，window.location.href 服务器端 http 请求重定向，执行将取决于您的互联网速度

function TestComponent() {
  window.location.href = "https://example.com";
  setTimeout(()=>{
    console.log("bar"); // <-- will probably not get executed - will depend on your internet speed
  }, 3000)

  return "";
}

我希望这能消除对 SPA 重定向的一些潜在误解