由于某些未知的原因,我似乎无法访问程序中的下一页,而是在localhost后面显示了这个奇怪的问号。
App.js:
import './App.css';
import Login from './Login.js';
import CommentsForm from './CommentsForm.js';
import ThankYouForm from './ThankYouForm.js';
import { Route, Routes, Router, Navigate, BrowserRoutes, Switch, Redirect, BrowserRouter } from 'react-router-dom';
import React, { useState } from "react";
function App() {
const [comments, setComments] = useState(); //store the comments
//routing the application to three pages: A Login page, A Comments form, and Thank you form
//Phone Number: 6474579858
return (
<div>
<BrowserRouter>
<Routes>
<Route path = '/' element={<Login/>} />
<Route path= '/login' element={<Login/>} />
<Route path= '/comment' element={<CommentsForm/>} />
<Route path='/thanks' element={<ThankYouForm/>} />
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
login.js:
import React, { useState } from 'react';
import { Navigate, useNavigate} from 'react-router-dom';
import CommentsForm from './CommentsForm.js';
export function Login() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
function handleSubmit(){
const navigate = useNavigate;
navigate('/comment');
};
return (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="email">Email:</label>
<input
type="email"
id="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
</div>
<div>
<label htmlFor="password">Password:</label>
<input
type="password"
id="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
</div>
<button onClick={<CommentsForm/>} >Login</button>
</form>
);
};
export default Login;
我知道所有这些页面都加载了,但唯一的问题是实际加载页面。最终发生的是,页面似乎加载,但它却显示一个“http://localhost:3000/?'。当检查网站本身的错误时,它说没有正确的onClick命令,即使我添加了一个。希望我很快得到这个问题的答案。
1条答案
按热度按时间oknwwptz1#
您的代码中存在一些问题,让我们一起解决它们:
1.由于您已经在表单元素中设置了
onSubmit
事件处理程序函数,因此可以删除onClick
处理程序。1.您忘记在
handleSubmit
处理程序中调用event.preventDefault()
,这将触发页面在单击按钮后重新加载useNavigate
是一个React Hook,只能在顶级调用(请参见Rules of Hooks),而不能在函数内部调用。此外,您需要调用它,而不仅仅是赋值它。下面是
Login.js
组件的工作代码: