如何从一页路由到另一页? [英] How to route from one page to another?
问题描述
如果我的 http 响应成功到新页面(即登录页面),我将尝试路由该页面.我已经编写了用于处理 http 请求及其工作正常并返回响应的代码,如果我的响应成功或登录成功,即 true 那么我想移动到我的下一页,即我的组件 <Loading/>
带有一些参数,如果我的响应失败,那么它应该在同一页面上
基本上我在尝试当我点击登录按钮时它应该发送一个 http 请求,如果请求返回一个响应然后它应该切换到另一个页面,否则它应该在同一页面上
const Login = () =>{const [userName , setUserName] = useState("")const [userPassword , setUserPassword] = useState("")const handleUsernameInput = (事件) =>{setUserName(event.target.value);console.log("输入的用户名")}const handlePasswordInput = (事件) =>{setUserPassword(event.target.value);console.log("输入密码")}const [httpData, apiMethod] = useHttpPOSTHandlerdotthen()const handleSubmit = () =>{apiMethod({url: 'url' , data: { "password": userPassword, "username": userName }})设置用户名("")设置用户密码(")下一页();}const nextPage = () =>{如果(httpData){return <Redirect to={{ pathname: '/landing', key: httpData.key}}/>}别的{return <Redirect to={{ pathname: '/' }}/>}}返回 (<div className = "登录页面"><表格><Form.Control size = "sm"类型=文本"占位符=用户名"值 = {用户名}onChange = {event =>处理用户名输入(事件)}/><Form.Control size = "sm"类型=密码"占位符=密码"值 = {用户密码}onChange = {event =>句柄密码输入(事件)}/><按钮大小=sm"变体=成功"onClick = {handleSubmit}>登录按钮></表格>
);};导出默认登录;
离你不远了,你可以渲染Redirect 组件在使用 React Router 时执行从一个页面到另一个页面的 HTTP 重定向,例如
if (httpData) return ;//否则渲染登录页面
然后在Landing
里面,你可以通过this.props.location.state.key
访问key.
I was trying to route the page if my http response is successful to the new page i.e. landing page.
I have written code for handling http request and its working fine and returning response, if my response is successfull or the login is successful i.e. true then i want to move to my next page i.e my component <Loading />
with some parameter if my response fails then it should be on the samepage
Basically i was trying when i click on login button it should send a http request if the request return a response then it should switch over to another page else it should be on the same page
const Login = () => {
const [userName , setUserName] = useState("")
const [userPassword , setUserPassword] = useState("")
const handleUsernameInput = (event) => {
setUserName(event.target.value);
console.log("username entered")
}
const handlePasswordInput = (event) => {
setUserPassword(event.target.value);
console.log("password entered")
}
const [httpData, apiMethod] = useHttpPOSTHandlerdotthen()
const handleSubmit = () => {
apiMethod({url: 'url' , data: { "password": userPassword, "username": userName }})
setUserName("")
setUserPassword("")
nextPage();
}
const nextPage = () => {
if (httpData) {
return <Redirect to={{ pathname: '/landing', key: httpData.key}} />
}
else{
return <Redirect to={{ pathname: '/' }} />
}
}
return (
<div className = "login-page">
<Form>
<Form.Control size = "sm"
type="text"
placeholder="Username"
value = {userName}
onChange = {event => handleUsernameInput(event)}
/>
<Form.Control size = "sm"
type="password"
placeholder="Password"
value = {userPassword}
onChange = {event => handlePasswordInput(event)}
/>
<Button size = "sm" variant="success"
onClick = {handleSubmit}>Login</Button>
</Form>
</div>
);
};
export default Login;
You aren't far away, you can render the Redirect component to perform a HTTP redirect from one page to another when using React Router e.g.
if (httpData) return <Redirect to={{ pathname: '/landing', state: { key: httpData.key } }} />;
// render the login page otherwise
Then inside Landing
, you can access the key via this.props.location.state.key
.
这篇关于如何从一页路由到另一页?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!