使用 react-router-dom 6 在 react 中导航

Question

我正在开发一个 React 应用程序，我正在尝试使用 onSubmit 函数从登录表单导航到我的应用程序的主屏幕。这是我到目前为止所拥有的。在我的 formik 表单中，我试图在提交表单时传递电子邮件值。之后，用户被路由到“/dashboard”并最终进入“/dashboard/app”，我试图在控制台中获取电子邮件值。我尝试记录 route.params 和 route.email 但这给出了未定义或错误。

Answer 1

据我了解，您想使用一些参数进行重定向。最简单的解决方案是对状态使用“历史推送”。

import { useHistory } from "react-router-dom";

const LoginForm = () => {
  const history = useHistory();
  const formik = useFormik({
    onSubmit: () => {
      history.push('/dashboard', {replace: true, email: values.email})
    }
  })
}

以类似的方式访问历史状态：history.state

Answer 2

您是要向导航添加状态吗？

原文：

onSubmit: () => {
          navigate('/dashboard', {replace:true, email: values.email})
}

更改为（有状态）：

onSubmit: () => {
          navigate('/dashboard', {replace:true,
                                  state: { 
                                           email:values.email
                                          }
                                   })
}

使用 react-router-dom 6 在 react 中导航

Navigate in react using react-router-dom 6

reactjs

react-navigation

react-router-dom

formik