Redirect to index.html file in react 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

history.push
windows.location
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

Does this answer your question? [How do I redirect to another webpage?](https://stackoverflow.com/questions/503093/how-do-i-redirect-to-another-webpage) — Jorge Fuentes González, Jan 21 '21 at 16:33
Default react is running on index.html? What's file html you want to redirect to? — cuongdevjs, Jan 21 '21 at 16:34
i tried with react router but that does not work and i want to redirect to index.html file in public folder from the js file in src folder — Dinesh s, Jan 21 '21 at 16:37

score 0 · Answer 1 · answered Jan 21 '21 at 16:36

0

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

answered Jan 21 '21 at 16:36

WebbH

2,379
1
15
26

i tried this but this also is not work gives a error as history is can not be used in class component – Dinesh s Jan 21 '21 at 16:39
It can if you use withRouter and props.history instead of the useHistory hook – WebbH Jan 21 '21 at 16:58
withrouter throws a error as you should not use outside a – Dinesh s Jan 21 '21 at 17:00
You have to render the component as a child of a router component or it won't have access to history – WebbH Jan 21 '21 at 17:04

score 0 · Answer 2 · answered Jan 21 '21 at 16:46

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

i throws a error as you should not use outside a – Dinesh s Jan 21 '21 at 16:57 — Dinesh s, Jan 21 '21 at 16:57

score 0 · Answer 3 · answered Jan 21 '21 at 16:56

0

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,

answered Jan 21 '21 at 16:56

George Poliovei

1,009
10
12

added const history = useHistory(); history.push('/') below the setstate in handleClickHello() it return error as '' React Hook "useHistory" cannot be called in a class component. React Hooks must be called in a React function component or a custom React Hook function'' – Dinesh s Jan 21 '21 at 17:13

Redirect to index.html file in react onclick

3 Answers3