[英]Getting 404 error while routing after sign-in in ReactJS
從當前頁面登錄后,我正在從當前頁面路由到儀表板。
但是路由后,它顯示找不到頁面。 然后刷新頁面儀表板開始顯示。
我知道這背后的原因。 因為我已經修復了從 sessionStorage 到 U_Id 的路徑。 因此,最初它沒有獲取 U_Id,而是在刷新存儲在 session 中的 U_Id 之后。
但是我找不到解決方案,即如何在登錄后不刷新就顯示我的儀表板。
export class SignIn extends Component {
organizationData = new Organization();
constructor(props) {
super(props);
this.state = {
Email: "",
Password: "",
redirect: false,
};
this.handleEmailChange = this.handleEmailChange.bind(this);
this.handlePasswordChange = this.handlePasswordChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleEmailChange(event) {
this.setState({ Email: event.target.value });
}
handlePasswordChange(event) {
this.setState({ Password: event.target.value });
}
handleSubmit(event) {
event.preventDefault();
axios
.post("http://localhost:8002/Organization/auth", {
Email: this.state.Email,
Password: this.state.Password,
})
.then((response) => {
console.log(response);
if (response.data.status) {
this.organizationData.setUId = response.data.message.U_Id;
this.organizationData.setToken = response.data.token;
sessionStorage.setItem(
"U_Id",
JSON.stringify(this.organizationData.getUId)
);
sessionStorage.setItem(
"token",
JSON.stringify(this.organizationData.getToken)
);
this.props.history.push(
`/${sessionStorage.getItem("U_Id")}/dashboard`
);
}
});
}
render() {
if (this.state.redirect) {
return <Redirect to={`/${sessionStorage.getItem("U_Id")}/dashboard`} />;
}
return (
<div className="sign-in-container">
<div className="sign-in-inner">
<h3>Welcome To</h3>
<h1>PRACTICA</h1>
</div>
<div className="sign-in-input">
<h2>SIGN IN</h2>
<div className="sign-in-input-inner">
<input
className="input"
value={this.state.Email}
onChange={this.handleEmailChange}
type="email"
placeholder="University Id or Email"
/>
<input
className="input"
type="password"
value={this.state.Password}
onChange={this.handlePasswordChange}
placeholder="Password"
/>
<div
onClick={this.handleSubmit}
className="sign-in-button-container"
>
Login In
</div>
</div>
</div>
</div>
);
}
}
export default withRouter(SignIn);
路由文件
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
U_Id: sessionStorage.getItem("U_Id"),
};
}
componentWillMount() {
this.setState({ U_Id: sessionStorage.getItem("U_Id") });
}
render() {
return (
<div className="app">
<Router>
<Switch>
<Route exact path="/">
<Header />
<Body />
<Footer />
</Route>
<Route exact path="/sign-in">
{sessionStorage.getItem("token") ? (
<Redirect to={`/${sessionStorage.getItem("U_Id")}/dashboard`} />
) : (
<>
<Header />
<Login />
</>
)}
</Route>
<Route exact path={`/${sessionStorage.getItem("U_Id")}/dashboard`}>
<Dashboard item="home" />
</Route>
<Route
exact
path={`/${sessionStorage.getItem("U_Id")}/dashboard/upcommings`}
>
<Dashboard item="upcomming" />
</Route>
<Route
exact
path={`/${sessionStorage.getItem("U_Id")}/dashboard/setting`}
>
<Dashboard item="setting" />
</Route>
<Route
exact
path={`/${sessionStorage.getItem("U_Id")}/dashboard/privacy`}
>
<Dashboard item="privacy" />
</Route>
<Route exact path="/sign-up/redirect">
<Header />
<SignUpRedirect />
</Route>
<Route exact path="*">
<Header />
<PageNotFound />
</Route>
</Switch>
</Router>
</div>
);
}
}
試試這個方法——
```<Redirect
to={{
pathname: '/dashboard',
state: { U_ID: this.organizationData.getUId }
}} />;
}}
在您的儀表板組件中,您可以訪問 U_ID
this.props.location.state.U_ID
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.