使用React Hook形式和Redux工具包的形式。然后路由React路由器DOM中的路由

Question

我正在尝试使用React Hook表单和Redux工具包进行多步骤形式。 我的表格正常。他们正在发送数据。我的第一形式是在“/”路径上。这将完成，然后第二个形式在“/step2”路径上。但是，当第二形式完成后，路由将变为“/step2/step3”。为什么不是“/step3”？ 3形式出现在“/step3”。我正在使用Usenavigate Hook。

       export const FormStep1 = () => {
          const dispatch = useDispatch();
          const navigate = useNavigate();
          const email = useSelector((state) => state.email);
          const password = useSelector((state) => state.password);
        
          const {
            handleSubmit,
            register,
            formState: { errors },
          } = useForm({
            resolver: yupResolver(schema),
            defaultValues: { email, password },
          });
        
          const submit = (data) => {
            dispatch(chooseEmail(data.email));
            dispatch(choosePassowrd(data.password));
            navigate("./step2");
          };
        

以下是我设置路线的方式

            function App() {
              return (
                <BrowserRouter>
                  <Routes>
                    <Route exact path="/" element={<FormStep1 />} />
                    <Route path="/step2" element={<FormStep2 />} />
                    <Route path="/step3" element={<FormStep3 />} />
                  </Routes>
                </BrowserRouter>
              );
            }
           
please guide where i am doing wrong.

Answer 1

从React-Router-dom文档中：

Either pass a To value (same type as <Link to>) with an **optional second { replace, state } arg or**

我相信问题是您在路由到 /step3时不会将第二个参数传递给Usenavigate（）。