Question

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

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

这会在点击div时执行，但我无法进入/登录页面。如何做？

Answer 1

使用所有先前的答案，我将在此描述此用例：

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 2

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 3

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

history.push("/login")

或

history.replace("/login")

Answer 4

如果您尝试通过清理本地存储/重定向的功能注销React应用程序（使用URL模式/#/page），请尝试使用go：

import { createHashHistory } from "history";

const history = createHashHistory();

history.go("/login");

go从历史记录列表中加载特定的URL，该URL可用于返回历史记录，也可用于前进，在这种情况下，“前进”将使用/login并重定向的绝对路径。

更新

在React Router 6上，您可以使用useNavigate进行编程导航

Answer 5

尝试


import React from "react";
const createHistory = require("history").createBrowserHistory;

class Logout extends React.Component {
    constructor(props) {
        super(props);
        let history = createHistory();
        history.push("/login");
        let pathUrl = window.location.href;
        window.location.href = pathUrl;   

    }

    render() {

        return (
            <div>
            </div>
        );
    }
}

export default Logout;

Answer 6

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

您可以通过编程方式更改路线，其历史记录如下：

export default class Logout extends Component {
  logout = () => {
    this.props.history.push("login");
  };

  render() {
    return (
      <div>
        <h1>Logout</h1>
        <button onClick={this.logout}>Logout</button>
      </div>
    );
  }
}

如果您需要localStorage.clear();，只需将其置于注销功能中即可。您可以在此处查看完整（正常）代码示例：https://codesandbox.io/s/py8w777kxj

Answer 8

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

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 9

在React Router 6中，重定向看起来像这样：

const navigate = useNavigate();
const goToLoginPage = () => navigate('/login');

所有代码都可以在这里看到： https://github.com/anmk/redirect/blob/redirect/src/App.js

您还可以编写一个组件来执行此操作： https://github.com/anmk/redirect/tree/redirect_to_component

Answer 10

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

Block
has_many_attached :images

User
has_many_attached :images

Answer 11

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

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

Answer 12

您需要从Redirect导入react-router-dom，如下所示：

import { Redirect } from 'react-router-dom';

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

12 个答案:

更新