How can I load another web page by clicking a button in reactjs?

Question

I want to go DetailAboutUs page by clicking AboutUs button. How can I do it?

This is my code.

render(){
    var buttonStyle;
    return(
        <div>

           <button
               className="btn btn-default"
            style={buttonStyle}
               onClick={this.props.clickHandler(DetailAboutUs)}>About Us

           </button>

        </div>
    )

Answer 1

You can have flag in the components state which tracks the click event, something like isButtonClicked = false.

Say you would like to load a page by name DetailAboutUs which is a component.

The code would look something like this.

isButtonClickedHandler = () => {
   this.setState({isButtonClicked = true});
}

render(){
    var buttonStyle;
    var detailAboutUs = this.state.isButtonClicked == true ? <DetailAboutUs> 
                        </DetailAboutUs> : null;

    return(
        <div>

           <button
               className="btn btn-default"
                style={buttonStyle}
                 onClick={this.isButtonClickedHandler()}>About Us

           </button>
          {detailAboutUs} //This will load only after the button click//

        </div>
    )