Как перенаправить на новую страницу функцию в React?

Question

Прямо сейчас у меня есть эта функция в реакции, и я использую ее для возврата к входу в систему, а также для проверки сброса значения localStorage, для которого я использую функцию, а не с тех пор, как не могу сбросить значение локального хранилища.Функция ниже: -

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

Это выполняется при нажатии на div, но я не могу перейти на страницу / login. Как это сделать?

Answer 1

вы можете использовать этот пример для перенаправления после рендеринга функции

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 2

Вам необходимо импортировать Redirect из react-router-dom, например:

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

Answer 3

Вы можете изменить маршрут программно, с историей, подобной этой:

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

См .: https://www.npmjs.com/package/react-router-dom.

Answer 5

Вы можете использовать переменную истории в реквизитах или, если у реквизитов нет истории, вы можете использовать с Router HOC (https://reacttraining.com/react-router/web/api/withRouter)

history.push("/login") 

или

history.replace("/login")

Answer 6

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

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