我想使用 react 完成登录并到达路由器.. 本质上,我想在成功验证后从登录组件转到 HomeLayout 组件。我已成功登录
这是我的 App 组件的代码,它是项目的入口点
import React, { Component } from 'react';
function App() {
return (
<div>
<Login />
</div>
);
}
================
登录组件
import React, { Component } from "react";
import axios from "axios"
class Login extends Component {
state = {
username: "",
password: "",
loggedIn: false
}
onChange = (e) => {
e.preventDefault()
this.setState({
[e.target.name]:e.target.value
})
}
LoginUser = (e)=>{
const {username, password} = this.state
e.preventDefault()
let UserLoginDetails = {
email: username,
password: password
}
axios.post("localhost:4500/users/login", UserLoginDetails)
.then(loginResultFromBackend=>{
this.setState({loggedIn: true})
// I want to go to "/Home" here
}).catch(error=>{
console.log(error)
})
}
render() {
return (
<form onSubmit={this.LoginUser}>
<input
type="text"
value={this.state.username}
name="username"
onChange={this.onChange}/>
<input
type="text"
value={this.state.username}
name="username"
onChange={this.onChange}/>
<button type="submit">Submit</button>
</form>
);
}
}
============================
家庭组件
import category from "./category";
import { Router, Link } from "@reach/router";
import NotFound404 from "../default404/PageNotFound";
class HomeLayout extends Component {
render() {
return (
<div>
<Link to={`Home`} > Home </Link>
<Link to={`category`} Categories </Link>
<Router>
<Home path="/Home"></Home>
<category path={`category/:category`}></category>
<NotFound404 default />
</Router>
</div>
);
}
}
在该状态下,我设置了username=""、password=""和loggedIn = false。
预期行为
从后端获得结果后,我想导航到位于 /Home 的主页。
我尝试这样做navigate("/Home")
,但这只是更改了 URL,而不更改组件。
帮帮我?如果来自 react-router 方面的人有所启发,那将很有用,因为我本质上是一个代码新手。