类型错误： 无法读取未定义的句柄提交窗体的属性'push'

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

解决方案是为"路由，而不是在应用程序功能中执行所有操作。

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

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;

如果你想将相关状态传递到主页；路径名"；以及"；状态"；到历史.push

编辑：只是为了以防万一你想知道，我故意放了一个"你好"；以及"；某人；进入名称和姓氏状态，这样我就可以快速按下按钮并触发handleSubmitForm函数。