redirecting to logout a user using react router

Question

I am trying to redirect user to the URL hostUrl+'logout' when they click Yes button from the Are you sure you want to log out? popup dialog. Since my other parts of code is making use of react router, I am wondering if I could make use of the same inside the following function :

 logoutDialogClose = event =>{
    if (event) {
        this.setState({ displayLogoutPopup: false})
        
       
    }        
}

Someone in this post suggested making use of Link but not sure if that applies to my case or not.

Maybe I will need a separate function logoutDialogYes once above testing is done to separate Cancel and Yes clicks from the popup dialog.

My complete code is below:

const hostUrl = properties.baseUrlUI

class Main extends Component {
    constructor() {
        super();
        this.state = {
          
         
            isAuthenticated: false,
            displayLogoutPopup: false,
            
        };
        this.logoutDialogOpen = this.logoutDialogOpen.bind(this)        
        this.logoutDialogClose = this.logoutDialogClose.bind(this)

    }

    componentDidMount() {
     //some stuff here  
     }

    loadDropDownObjects() {
          // some axios call to store info in session storage
    }

    logoutDialogOpen = event =>{
        if (event) {
            this.setState({ displayLogoutPopup: true})
                      
        }        
    }

    logoutDialogClose = event =>{
        if (event) {
            this.setState({ displayLogoutPopup: false})
            /* <Link to="/">
                <i className="fa fa-sign-out pull-right"></i> 
                Log Out
          </Link> */
          
           /*  console.log("Testing host URL");
            console.log(hostUrl);
            axios.delete(hostUrl+'logout')
            //axios.get(hostUrl+'logout') 
            .then(response => {
                console.log("Reaching inside the response of logoutDialogClose function and printing the response below:");
                console.log(response);
                //keeping the setState outside until we test it on dev server
                //this.setState({ displayLogoutPopup: false})
            })
            .catch (error => {
                console.log("logout error", error);
            }) */
           
        }        
    }
    
    render() {
       
        const logoutDialog = this.state.displayLogoutPopup ? (
            <div className="popup popup--icon -question js_question-popup"
                 id={this.state.displayLogoutPopup ? 'popup--visible' : ''}>
                <div className="popup__background"></div>
                <div className="popup__content">
                    <h3 className="popup__content__title">
                        Are you sure you want to log out?
                    </h3>
                    <p>
                        <button className="button button_accept" onClick={this.logoutDialogClose}>Yes</button>
                        <button className="button button--warning" onClick={this.logoutDialogClose}>Cancel</button>
                    </p>
                </div>
            </div>
        ) : null

        return (
            
            <div>
            {
                this.state.isAuthenticated ? (
                    <BrowserRouter basename={process.env.REACT_APP_ROUTER_BASE || ''}>
                        <div>
                            <div className="header">
                                <div className="header-logo">
                                <img src="images/logo.jpg"/>
                                <span>DATA</span>
                                </div>

                                <div className="logout_sec">
                                <div className="logout_icon">
                                    <a href="javascript:void(0)" onClick={this.logoutDialogOpen}> <FontAwesomeIcon
                                        style={{fontSize: '1.5em'}} icon={faSignOutAlt}/></a>
                                </div>
                                </div>                                

                                <ul className="header-list">
                                <li>
                                    <NavLink exact to="/">
                                        Home
                                    </NavLink>
                                </li>
                                <li>
                                    <NavLink to="/myprojects">My Projects</NavLink>
                                </li>
                                <li>
                                    <NavLink to="/myassets">My Assets</NavLink>
                                </li>
                              
                                <li>
                                    <NavLink to="/datadownload">DataSet Download</NavLink>
                                </li>
                                <li>
                                    <NavLink to="/assetbrowser">Asset Browser</NavLink>
                                </li>
                            </ul>



                                {/* Popup COde start */}

                                {logoutDialog}
                                {/* Popup code End */}
                            </div>

                            <div id="forNotification"></div>
                            <div>
                                <Switch>
                                    <Route exact path="/" component={Home}/>
                                    <Route path="/myprojects"
                                           render={(props) =>
                                               <div>
                                                   <Projects {...props}/>
                                               </div>
                                           }
                                    />
                                    
                                  
                                    <Route exact path="/project" component={ProjectView}/>
                                    <Route exact path="/datadownload" component={DataDownload}/>
                                    <Route exact path="/assetbrowser" component={AssetBrowser}/>
                                    <Route exact path="/datarequest" component={DataRequest}/>
                                    <Route path='/404' component={NotFoundPage}/>
                                    <Redirect to="/404"/>
                                </Switch>
                            </div>
                        </div>
                    </BrowserRouter>
                ) : null
            }
            </div>
        );
    }
}

export default Main;

Answer 1

Try adding this import:

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

Change the export statement to:

export default withRouter(Main);

Then, you should be able to access the history object inside Main through this.props.history. For example:

logoutDialogClose = event =>{
    if (event) {
        this.setState({ displayLogoutPopup: false})
        
       this.props.history.replace(`/some/path`);
       // OR
       this.props.history.push(`/some/path`);
    }        
}

Edit:

Try replacing the export statement with this:

const MainWithRouter = withRouter(Main);

const MainWrapper = props => (
    <BrowserRouter basename={process.env.REACT_APP_ROUTER_BASE || ''}>
        <MainWithRouter {...props} />
    </BrowserRouter>
);

export default MainWrapper;