TypeError：无法读取未定义句柄提交表单的属性“推送”

Question

登录后，我想重定向到主页。 在表单中输入姓名和姓氏后，当我们点击按钮时，如何跳转到首页？

在表单中输入姓名和姓氏后，当我们点击按钮时，如何跳转到首页？

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import FormData from './components/form-data'
import { useState, useEffect } from "react";
import { BrowserRouter as Router, Route, Switch, useHistory} from 'react-router-dom';
//import { Redirect } from "react-router-dom";
import Home from './components/home'
//import Login from './components/login'




const USERDATA = localStorage.getItem('userdata')
  ? JSON.parse(localStorage.getItem('userdata'))
  : []


function App() {
  const [name, setName] = useState('')
  const [surname, setSurname] = useState('')
  const [userdata, setUserdata] = useState(USERDATA)
  const history = useHistory();
  
  const handleName = event => {
    setName(event.target.value)
  }
  const handleSurname = event => {
    setSurname(event.target.value)
  }

  const handleSubmitForm = event => {
    event.preventDefault()
    if (name !== '' && surname !== '') {
      const data = { name, surname }
      setUserdata(data)
      setName('')
      setSurname('')
      history.push("/Home")
      
    } else {
      console.log('Hata')
    }
  }
 
  useEffect(() => {
    localStorage.setItem('userdata', JSON.stringify(userdata))
  }, [userdata])

 
  return (
    <Router>

      <main>
        <Switch>
          
            <Route path="/Home" >
              <Home userdata={userdata} />
            </Route>
          
            <Route path="/" >
              <FormData name={name}
                surname={surname}
                handleName={handleName}
                handleSurname={handleSurname}
                handleSubmitForm={handleSubmitForm} 
                />
                
            </Route>
         


        </Switch>
      </main>
    </Router>
  );

}

export default App;


/*<Route exact path="/Home" name={name}>
            {FormData } ?
                <Redirect to="/Form" /> :
                <Home />}
            </Route>
          <Redirect to="/Home" />
          <Redirect to={{
            pathname: "/Form",
            search: "utm=your+face"

          }} />
          <Redirect push to="/Home" />*/

---

登录后，我想重定向到主页。

Answer 1

解决方案是为“/”路由制作一个组件，而不是在 App 函数中做所有事情。

无论如何，您的应用只应该真正处理路由。以下作品：

import "./styles.css";
// import FormData from './components/form-data'
import { useState, useEffect } from "react";
import {
  BrowserRouter as Router,
  Route,
  Switch,
  useHistory,
  useLocation
} from "react-router-dom";
//import { Redirect } from "react-router-dom";
// import Home from './components/home'
//import Login from './components/login'

const Root = () => {
  const [name, setName] = useState("hello");
  const [surname, setSurname] = useState("someone");
  const [userdata, setUserdata] = useState(USERDATA);

  const history = useHistory();

  const handleSubmitForm = (event) => {
    event.preventDefault();
    if (name !== "" && surname !== "") {
      const data = { name, surname };
      setUserdata(data);
      setName("");
      setSurname("");
      history.push({ pathname: "/Home", state: { ...data } });
    } else {
      console.log("Hata");
    }
  };

  useEffect(() => {
    localStorage.setItem("userdata", JSON.stringify(userdata));
  }, [userdata]);

  return <button onClick={handleSubmitForm}>Submit form</button>;
};

const Home = (props) => {
  const location = useLocation();
  return (
    <div>
      <p>I'm in home</p>
      <p>name</p>
      {location.state.name}
      <p>surname</p>
      {location.state.surname}
    </div>
  );
};

const USERDATA = localStorage.getItem("userdata")
  ? JSON.parse(localStorage.getItem("userdata"))
  : [];

const App = () => {
  return (
    <Router>
      <main>
        <Switch>
          <Route path="/Home">
            <Home />
          </Route>
          <Route path="/">
            <Root />
          </Route>
        </Switch>
      </main>
    </Router>
  );
};

export default App;

如果您想将相关状态传递给主页，那么您可以将“路径名”和“状态”传递给history.push

编辑：以防你想知道，我特意在姓名和姓氏中加入了“你好”和“某人”，这样我就可以快速按下按钮并触发 handleSubmitForm 函数。