如何从 React 中的函数重定向到新页面？

Question

现在我在反应中有这个功能，我正在使用它来返回登录并检查重置我正在使用该功能的 localStorage 值，而不是因为使用它我无法重置本地存储值。功能如下：-

logout(){
    localStorage.clear();
    console.log("cliasdk");
    return(
        <Redirect to="/login"/>
    )
  }

这在单击 div 时执行，但我无法转到 /login 页面。如何做？

Answer 1

如果您使用该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);

请参阅：https : //www.npmjs.com/package/react-router-dom。

Answer 2

如果你不想处理react-router-dom，这是最简单的。
这是一个用react函数组件编写的示例

const Page = () => {
   const redirect = () => {
      window.location.href = '/anotherPagePath'
   }
   return (
      <button onClick={redirect}>go to another page</button>
   )
}

Answer 3

有了之前的所有答案，我将在这里描述这个用例：

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 }

就是这样。

Answer 4

您可以在道具中使用历史变量，或者如果道具中没有历史，您可以使用 withRouter HOC ( https://reacttraining.com/react-router/web/api/withRouter )

history.push("/login") 

或者

history.replace("/login")

Answer 5

您可以在呈现函数后使用此示例进行重定向

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>
    )
  }
}

Answer 6

import React from "react"
import { useHistory } from "react-router-dom";

export const Component = ( props ) => {
  const history = useHistory()
  const handler = () => {
    //Redirect to another route
    history.push("/route-link") 
  }
}

也许这就是你正在寻找的。

Answer 7

logout(){
    localStorage.clear();
    this.setState({redirect: true})
  }

//inside Render
render(){
    const {redirect} = this.state;
   if(redirect){
    return <Redirect push to="/login"/> 
}
}