现在我在react中有这个功能，我正在使用它来返回登录并检查重置我正在使用该功能的 localStorage 值，而不是因为使用它我无法重置本地存储值。功能如下：-
logout(){
localStorage.clear();
console.log("cliasdk");
return(
<Redirect to="/login"/>
)
}
这在单击 div 时执行，但我无法转到 /login 页面。如何做？
如何从 React 中的函数重定向到新页面？
IT技术
reactjs
react-router
2021-05-06 05:41:51
4个回答
如果您使用该react-router-dom包，您可以使用路由器包装您的组件，然后您就可以以编程方式重定向用户，就像这样this.props.history.push('/login')。
例如：
import {withRouter} from 'react-router-dom';
class Component extends React.component {
constructor(props){
}
componentDidMount(){
this.props.history.push('/login');
}
}
export default withRouter(Component);
有了之前的所有答案，我将在这里描述这个用例：
on `/login` page, I would like to go to `/` when login is OK:
添加进口：
import { Redirect } from 'react-router-dom';
在您的组件默认状态中添加一个重定向到 false：
state = {
redirect: false,
}
添加到您的业务逻辑（例如onLoginOk()）重定向状态的更改
this.setState({ redirect: true })
在您的render根元素中添加某处：
{ this.state.redirect ? (<Redirect push to="/"/>) : null }
而已。
您可以在呈现函数后使用此示例进行重定向
import React from 'react';
import { Redirect } from 'react-router-dom';
class MyComponent extends React.Component {
state = {
redirect: false
}
setRedirect = () => {
this.setState({
redirect: true
})
}
renderRedirect = () => {
if (this.state.redirect) {
return <Redirect to='/target' />
}
}
render () {
return (
<div>
{this.renderRedirect()}
<button onClick={this.setRedirect}>Redirect</button>
</div>
)
}
}
您可以在props中使用历史变量，或者如果props中没有历史，您可以使用 withRouter HOC ( https://reacttraining.com/react-router/web/api/withRouter )
history.push("/login")
或者
history.replace("/login")