如何在 react-router 中使用 onSubmit，同时 onSubmit 检查表单中的详细信息，如果正确，他将 Link="" 传递给另一个组件

Question

我正在尝试在表单中使用 onSubmit，我希望它检查表单中的详细信息，并根据详细信息来决定是否要传递给 Link 中的另一个组件 - router 我该怎么做，如何编写 Link （它只会在我想要的时候在 onSubmit 函数中通过）？这是我的路由代码：

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import LogIn from "./components/LogIn";
import HomePage from "./HomePage";
import Todos from "./components/Todos";
import Albums from "./components/Albums";
import Info from "./components/Info";
import Posts from "./components/Posts";
function App() {
  return (
    <Router>
      <div>
        <Routes>
          <Route path="/" pelement={<HomePage />} />
          <Route path="/login" element={<LogIn />} />
          <Route path="/todos" element={<Todos />} />
          <Route path="/info" element={<Info />} />
          <Route path="/albums" element={<Albums />} />
          <Route path="/posts" element={<Posts />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

我希望当我点击此处提交时（在登录组件中向下）它将控制 Link="/" 只有 onSubmit 决定[=13 时才会发生=]

import { FormEventHandler } from "react";
function LogIn() {
  const [inputField, setInputField] = useState({
    user_name: "",
    password: "",
  });

  const inputChange = (e) => {
     e.preventDefault();
    setInputField((prevState) => ({
      ...prevState,
      [e.target.name]: e.target.value,
    }));
  };

  const submitButton = (e) => {
    e.preventDefault();
    if(**the details in the form are correct**) 
        **add the details to local storage and pass to home page with:<Link to="/"></Link>**
    else
        alert("details are not correct");
  };

  return (
    <form onSubmit={submitButton}>
      <label>Enter you user name</label>
      <input
        type="text"
        name="user_name"
        onChange={inputChange}
        placeholder="Your user name"
        value={inputField.user_name}
      />
      <br />
      <label>Enter you password</label>
      <input
        type="password"
        name="password"
        onChange={inputChange}
        placeholder="Your password"
        value={inputField.password}
      />
      <br />
        <button type="submit" >Log In</button>
    </form>
  );
}

export default LogIn;

Answer 1

您不能 return 像这样的回调中的 Link 组件并期望它被渲染并在 DOM 中执行任何操作。在回调中，您需要使用 navigate 函数发出命令式导航操作。

示例：

import { useNavigate } from 'react-router-dom';

function LogIn() {
  const navigate = useNavigate();

  ...

  const submitButton = (e) => {
    e.preventDefault();
    if (**the details in the form are correct**) {
      // add the details to local storage 
      localStorage.setItem("details", details);
      // and pass to home page
      navigate("/", { state: { details } });
    } else {
      alert("details are not correct");
    }
  };

  ...

如何在 react-router 中使用 onSubmit，同时 onSubmit 检查表单中的详细信息，如果正确，他将 Link="" 传递给另一个组件

how to use onSubmit in react-router while onSubmit checks the details in the form and if it's correct he pass with Link="" to another component

react-router