依赖于 `useEffect` 的 `location.state` 没有被组件的初始渲染触发

Question

我有一个父组件，它有用于子路由的Outlet 。

我想将数据从父组件 ( App.js ) 传递到Outlet为默认链接 ( Test.js ) 呈现的组件。

为此，我使用了位置 state object 并从父组件传递数据。

<Link to="" state={{ data }}>
  Render test
</Link>

虽然在初始渲染时，它在子组件（ Test.js ）中仍然是 null ，但是如果我导航到该父组件中的其他路由（路由： /dummy ，组件： Dummy.js ）并返回到Test.js组件路由，我可以在location.state中看到值。

Codesandbox 链接更清晰： https://codesandbox.io/s/location-state-zjs5rt

我尝试在useEffect中添加location.state作为依赖项，但它没有在初始渲染时触发。

useEffect(() => {
  if (location.state) {
    setTestData(location.state.data);
  }
}, [location?.state]);

我想从App.js传递一些异步数据并在Test.js组件中使用它来渲染某些东西，我该如何实现？

Answer 1

如果您只是想让App组件中的一些 state 可用于任何嵌套路由的element组件，那么我建议通过Outlet组件可用的 React 上下文传递它。 路由组件使用useOutletContext挂钩来访问上下文。

例子：

应用程序

import { Outlet, Link } from "react-router-dom";
import { useEffect, useState } from "react";

export default function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    setTimeout(() => {
      setData("data that comes later");
    }, 2000);
  }, []);

  return (
    <div className="App">
      {data ? (
        <>
          <h2>This is APP component</h2>
          <ul>
            <li>
              <Link to="/">Render test</Link>
            </li>
            <li>
              <Link to="/dummy">Another dummy component</Link>
            </li>
          </ul>
          <Outlet context={{ data }} /> // <-- passed in context
        </>
      ) : (
        <>Loading...</>
      )}
    </div>
  );
}

测试

import { useEffect } from "react";
import { useOutletContext } from "react-router-dom";

export default function Test(props) {
  const { data } = useOutletContext();

  useEffect(() => {
    console.log("data using location", data);
  }, [data]);

  return <div>This is another component "{data}"</div>;
}