Reactjs TypeError:无法读取属性'；推动'；未定义handleSubmitForm的

登录后，我想重定向到主页。 在表单中输入姓名后，当我们单击按钮时，如何将我们定向到主页

在表单中输入姓名后，当我们单击按钮时，如何将我们定向到主页？

import'../node_modules/bootstrap/dist/css/bootstrap.min.css'；
从“./components/form data”导入FormData
从“react”导入{useState，useffect}；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch，useHistory}；
//从“react router dom”导入{Redirect}；
从“./components/Home”导入主页
//从“./components/Login”导入登录名
const USERDATA=localStorage.getItem（'USERDATA'）
? parse（localStorage.getItem（'userdata'））
: []
函数App（）{
const[name，setName]=useState（“”）
常量[姓氏，setSurname]=使用状态（“”）
const[userdata，setUserdata]=useState（userdata）
const history=useHistory（）；
const handleName=事件=>{
setName（event.target.value）
}
const handleSurname=事件=>{
setSurname（event.target.value）
}
const handleSubmitForm=事件=>{
event.preventDefault（）
如果（姓名！=''&&姓氏！=''）{
常量数据={名称，姓氏}
setUserdata（数据）
集合名（“”）
setSurname（“”）
历史记录。推送（“/主页”）
}否则{
console.log（'Hata'）
}
}
useffect（（）=>{
localStorage.setItem（'userdata'，JSON.stringify（userdata））
}，[userdata]）
返回(
);
}
导出默认应用程序；
/*
{FormData}？
:
}
*/

---

---

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

解决方案是为“/”路由制作一个组件，而不是在应用程序功能中执行所有操作

无论如何，你的应用程序应该只处理路由。以下工作：

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;

导入“/styles.css”； //从“./components/form data”导入FormData 从“react”导入{useState，useffect}； 进口{ BrowserRouter作为路由器， 路线,， 转换 使用历史， 使用地点 }从“反应路由器dom”； //从“react router dom”导入{Redirect}； //从“./components/Home”导入主页 //从“./components/Login”导入登录名 常量根=（）=>{ const[name，setName]=useState（“hello”）； const[姓氏，setSurname]=使用状态（“某人”）； const[userdata，setUserdata]=useState（userdata）； const history=useHistory（）； 常量handleSubmitForm=（事件）=>{ event.preventDefault（）； 如果（姓名！==“”&姓氏！==“”）{ 常量数据={姓名，姓氏}； setUserdata（数据）； 集合名（“”）； seturname（“”）； push（{路径名：“/Home”，状态：{…数据}）； }否则{ 控制台日志（“Hata”）； } }; useffect（（）=>{ setItem（“userdata”，JSON.stringify（userdata））； }，[userdata]）； 交回表格； }; const Home=（道具）=>{ const location=useLocation（）； 返回( 我在家

名字

{location.state.name} 姓

{地点.州.姓氏} ); }; const USERDATA=localStorage.getItem（“USERDATA”） ? parse（localStorage.getItem（“userdata”）） : []; 常量应用=（）=>{ 返回( ); }; 导出默认应用程序； 如果要将相关状态传递到主页，则可以将“路径名”和“状态”传递到history.push

编辑：以防万一，我特意在姓名和姓氏中输入“hello”和“someone”，这样我就可以快速按下按钮并触发handleSubmitForm函数

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;