英文:
Why <Navigate to="" /> is not working but console.log("Authentication successful!"); is working
问题
The <Navigate to="/home" />
is not working within the if
statement because it's not being returned in a way that can affect the navigation. In React, you typically handle navigation using routing components like react-router-dom
outside of the rendering logic.
To resolve this issue, you can use a different approach to handle navigation upon successful authentication. Here's how you can modify your code:
import Typewriter from "typewriter-effect";
import { useHistory } from "react-router-dom"; // Import useHistory hook from react-router-dom
import { useState } from "react";
const Login = () => {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const history = useHistory(); // Initialize the useHistory hook
const handleUsernameChange = (event) => {
setUsername(event.target.value);
};
const handlePasswordChange = (event) => {
setPassword(event.target.value);
};
const handleSubmit = (event) => {
event.preventDefault();
if (username === "name" && password === "123") {
// Authentication successful - use history to navigate to the home page
console.log("Authentication successful!");
history.push("/home"); // Use history.push to navigate
} else {
// Authentication failed - display an error message
console.log("Authentication failed!");
}
};
return (
<div className="flex justify-center items-center w-full h-screen bg-gradient-to-r from-lime-700 via-orange-900 to-red-800">
<div className="w-[500px] h-[490px] text-white bg-black/20 rounded-2xl">
<div className="w-[400px] py-10 mx-auto">
<form onSubmit={handleSubmit} className="text-black">
<label>
Username:
<input type="text" value={username} onChange={handleUsernameChange} />
</label>
<br />
<label>
Password:
<input type="password" value={password} onChange={handlePasswordChange} />
</label>
<br />
<button>
Submit
</button>
</form>
</div>
</div>
</div>
);
};
export default Login;
In this modified code, we use the useHistory
hook from react-router-dom
to handle navigation. When authentication is successful, we use history.push
to navigate to the home page. This way, you can navigate without the need for the <Navigate>
component inside an if
statement.
英文:
import Typewriter from "typewriter-effect";
import { Navigate } from "react-router-dom";
import { useState } from "react";
const Login = () => {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const handleUsernameChange = (event) => {
setUsername(event.target.value);
};
const handlePasswordChange = (event) => {
setPassword(event.target.value);
};
const handleSubmit = (event) => {
event.preventDefault();
if (username === "name" && password === "123") {
// Authentication successful - redirect to home page
console.log("Authentication successful!");
return <Navigate to="/home" />;
} else {
// Authentication failed - display an error message
console.log("Authentication failed!");
}
};
return (
<div className="flex justify-center items-center w-full h-screenw-full h-screen bg-gradient-to-r from-lime-700 via-orange-900 to-red-800">
<div className=" w-[500px] h-[490px] text-white bg-black/20 rounded-2xl">
<div className="w-[400px] py-10 mx-auto">
<form onSubmit={handleSubmit} className="text-black">
<label>
Username:
<input
type="text"
value={username}
onChange={handleUsernameChange}
/>
</label>
<br />
<label>
Password:
<input
type="password"
value={password}
onChange={handlePasswordChange}
/>
</label>
<br />
<button
>
Submit
</button>
</form>
</div>
</div>
</div>
);
};
export default Login;
The console.log
is working for both if condition but <Navigate to="/home" \>
is not working is there any way to resolve this error, tried return <Navigate to="/home" \>
without using if statement and it works, its not working in if statement, why this happens?
答案1
得分: 0
无法从回调函数中返回JSX,并期望它被渲染并执行任何操作。Navigate
组件发出一个声明式导航操作,并必须与组件渲染一起使用,例如从函数组件返回的JSX 的一部分。
如果您想从回调中调用导航操作,可以使用 useNavigate
钩子并发出一个命令式导航操作。
示例:
import { useNavigate } from "react-router-dom"; // 导入钩子
const Login = () => {
const navigate = useNavigate(); // 调用钩子
...
const handleSubmit = (event) => {
event.preventDefault();
if (username === "name" && password === "123") {
// 认证成功 - 重定向到主页
console.log("认证成功!");
navigate("/home"); // 发出导航操作
} else {
// 认证失败 - 显示错误消息
console.log("认证失败!");
}
};
...
英文:
You can't return JSX from a callback like this and expect it to be rendered and do anything. The Navigate
component issues a declarative navigation action and must be rendered with the component render, e.g. part of the returned JSX from the function component.
If you want to invoke a navigation action from a callback then use the useNavigate
hook and issue an imperative navigation action.
Example:
import { useNavigate } from "react-router-dom"; // <-- import hook
const Login = () => {
const navigate = useNavigate(); // <-- call hook
...
const handleSubmit = (event) => {
event.preventDefault();
if (username === "name" && password === "123") {
// Authentication successful - redirect to home page
console.log("Authentication successful!");
navigate("/home"); // <-- issue navigation action
} else {
// Authentication failed - display an error message
console.log("Authentication failed!");
}
};
...
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论