[英]Error: Invalid hook call, React router history
Hi guys, I'm a react beginner and I tried to execute a function to logout, but I get this error.大家好,我是反应初学者,我尝试执行 function 注销,但我收到此错误。 I think the error is related to the useHistory function because if I remove it, everything works perfectly.
我认为该错误与 useHistory function 有关,因为如果我删除它,一切正常。 Or in any case, someone knows how to redirect to another page programmatically
或者无论如何,有人知道如何以编程方式重定向到另一个页面
Error: Invalid hook call. Hooks can only be called inside of the body of a function component
This is my code.这是我的代码。
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import token from '../services/token'
import api from '../services/api'
import { useHistory } from 'react-router-dom';
const noLogueado = <React.Fragment>
<li className="nav-item">
<Link className="nav-link" to="/login">Login</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/register">Registrarse</Link>
</li>
</React.Fragment>;
const logueado = <li className="nav-item dropdown">
<a className="nav-link dropdown-toggle" href="#" role="button" id="dropdownPerfil" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
NAME USUARIO
</a>
<div className="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownPerfil">
<a className="dropdown-item" href="#">Mi Perfil</a>
<a className="dropdown-item" href="#" onClick={() => Logout()}>Cerrar sesión</a>
</div>
</li>;
const Logout = () => {
let history = useHistory();
api.post("logout", "").then(
(data) => {
// token.remove();
history.push('/login');
},
(error) => {
// token.remove();
history.push('/login');
}
);
}
export class NavBar extends Component {
render() {
return (
<nav className="navbar navbar-expand navbar-dark bg-dark">
<Link className="navbar-brand" to="/">
Home</Link>
<div className="collapse navbar-collapse">
<ul className="navbar-nav ml-auto">
{
token.isValid() ? logueado : noLogueado
}
</ul>
</div>
</nav>
)
}
}
export default NavBar
Rename Logout
to useLogout
(because it's a custom hook):将
Logout
重命名为useLogout
(因为它是一个自定义钩子):
const useLogout = () => {
let history = useHistory();
return useCallback(() => api.post("logout", "").then(
(data) => {
// token.remove();
history.push('/login');
},
(error) => {
// token.remove();
history.push('/login');
}
), [history]);
}
Convert logueado
to a function component ( Logueado
), and get the logout
function from useLogout
.将
logueado
转换为 function 组件( Logueado
),并从useLogout
获取logout
function 。 Call the function in onClick
.调用 onClick 中的
onClick
。
const Logueado = () => {
cosnt logout = useLogout()
return (
<li className="nav-item dropdown">
<a className="nav-link dropdown-toggle" href="#" role="button" id="dropdownPerfil" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
NAME USUARIO
</a>
<div className="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownPerfil">
<a className="dropdown-item" href="#">Mi Perfil</a>
<a className="dropdown-item" href="#" onClick={logout}>Cerrar sesión</a>
</div>
</li>;
)
}
And since Logueado
is now a component, render it as such inside the NavBar
render method:由于
Logueado
现在是一个组件,因此在NavBar
渲染方法中渲染它:
<ul className="navbar-nav ml-auto">
{
token.isValid() ? <Logueado /> : noLogueado
}
</ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.