重定向到 index.html 文件中的反应 onclick

Question

I want to redirect to index.html on clicking the div in react class component
i already having one on click function for passing value and also i tried all the ways

1. history.push
2. windows.location
3. withRouter but nothing works
   

and because of class component history.push gives a error as it cannot be used in class component

This is my js code

 import React, { Component } from 'react'; import axios from 'axios'; class Tweet extends Component { constructor(props) { super(props); this.state = { value: null, }; this.handleClickHai = this.handleClickHai.bind(this); this.handleClickHello = this.handleClickHello.bind(this); } handleClickHai(){ this.setState(state => ({ value: 'Hai' })); axios.get('/setvalue?value=Hi').then( function (response){ console.log(response) }).catch(function (error) { console.log(error) }); } handleClickHello(){ this.setState(state => ({ value: 'Hello' })); axios.get('/setvalue?value=Hello').then( function (response){ console.log(response) }).catch(function (error) { console.log(error) }); } render() { return ( <div className="greet" > <div className="hello" onClick={this.handleClickHello} > <h4>Hello</h4> </div> <div className="hi" onClick={this.handleClickHai}> <h4>Hi</h4> </div> </div> ); } } export default Tweet;

when i click the hello div it will pass the value to variable and also i want it to redirect to html page anyone help me with the code

Answer 1

Combine #1 and #3, wrap the component in withRouter and then use this.props.history.push()

Answer 2

import {withRouter} from "react-router-dom";
import React, { Component } from 'react';
import axios from 'axios';

class Tweet extends Component {
    constructor(props) {
        super(props);
        this.state = {
          value: null,
        };
      
        this.handleClickHai = this.handleClickHai.bind(this);
        this.handleClickHello = this.handleClickHello.bind(this);
    }
    handleClickHai(){
        this.setState(state => ({
            value: 'Hai'
        }));
       
        axios.get('/setvalue?value=Hi')
            .then( function (response){ 
                console.log(response)
            })
            .catch(function (error) {
                console.log(error) 
            });

    }
// Redirects To home
    redirectToHome(){
     this.props.history.push('/');}
}
    handleClickHello(){
        
        this.setState(state => ({
            value: 'Hello'
        }));
            
        axios.get('/setvalue?value=Hello')
            .then( function (response){ 
                console.log(response)
            })
            .catch(function (error) {
                console.log(error) 
            });

    }
  
  render() {
    return (
      <div className="greet" >
        
        <div className="hello" onClick={this.handleClickHello} >    
          <h4>Hello</h4>
        </div>

        <div className="hi" onClick={this.handleClickHai}>
            <h4>Hi</h4>
        </div>
    </div>

      
    );
  }
}

export default withRouter(Tweet);

Answer 3

this is a general example to redirect user.

import { useHistory } from 'react-router-dom'
....
....
const history = useHistory();
....
....
history.push('/') //here you can redirect to where you want.

greetings,