javascript - 使用 useNavigate 和 state 进行重定向似乎很难完成

Question

我正在尝试做的事情: 我有一张客户正在填写的表格。他们在支付预约费用之前选择预约的日期和时间。在付款过程中，他们会被重定向到托管的付款页面，然后返回完成该过程。当其重定向时，一些 CC 信息位于路径中。我正在尝试使用Params 来获取该信息，然后重定向到他们所在的页面。部分参数告诉我他们的付款已获得批准，这就是我所需要的。我需要根据此将状态设置为已批准。然后在我的预约页面中使用该状态，完成表单并提交，完成后将状态设置回 false。

当前代码:

const location = useLocation();
  let navigate = useNavigate();
const params = new URLSearchParams(location.search);
 <Route
                path='/confirm'
                element={
                  params.has('ssl_approval_code') ? (
                  
                    navigate('./appointments', { approved: true })
                  ) : (
                    <div style={{ height: '1000px' }}>
                      Error occurred while processing card. Please use a
                      different card or contact client.
                    </div>
                  )
                }
    />
  <Route
                exact
                path='/appointments'
                element={
                  <Appointment                 
                    navigate={navigate}      
                  />
                }
    />

然后尝试在提交函数的末尾执行此操作 navigator({approved: false });

目前我的导航根本不起作用。在我使用 Redirect 的版本 5 之前，状态很困惑。但当时至少是在重定向。它只是不会重置状态，所以我使用 useNavigate 切换到版本 6。

Answer 1

在 react-router-dom v6 中，状态在第二个参数的 options 对象中发送到 navigate。

useNavigate

declare function useNavigate(): NavigateFunction;

interface NavigateFunction {
  (
    to: To,
    options?: { replace?: boolean; state?: any }
  ): void;
  (delta: number): void;
}

将对象移动到 options 对象的 state 属性中。

navigate('./appointments', { state: { approved: false } });