如何使用 React Router 6 在不渲染的情况下更改 URL？

Question

    <BrowserRouter>
      <Routes>
        <Route path="/" element={<App />}>
          <Route path="object" element={<Navigate to="/object/new" />} />
          <Route path="object/:objId" element={<ObjEditor />} />
          <Route path="object/new" element={<ObjEditor />} />
          <Route index element={<Navigate to="/object/new" />} />
        </Route>

使用 react 路由器，您可以导航到 URL /object/1234 的对象。 <ObjEditor> 将在渲染时从数据库中获取数据。我希望如果您在 URL 中输入未知的objId，地址将更改为object/new，而不会导致重新渲染。

我尝试从 useEffect 挂钩调用 react 路由器的 navigate("/object/new") 函数，但由于数据获取是异步的，它甚至会从数据库中确实存在的 objId 导航离开。

我在这里缺少什么？谢谢。

Answer 1

这是我最终做的：

  const [requestedObj, setRequestedObj] = useState();
  const { objId } = useParams();

  useEffect(() => {
    if (requestedObj)
      dispatch({ type: Actions.LOAD_OBJECT, obj: requestedObj });
  }, [requestedObj]);

  useEffect(() => {
    let isSubscribed = true;

    const fetchObject = async () => {
      const obj = await db.getObject(objId | 0);

      if (isSubscribed && obj) {
        setRequestedObj(obj);
      }
    };

    fetchObject().catch(() => {
      navigate("/object/new");
    });

    return () => (isSubscribed = false);
  }, [objId, setRequestedObj]);