使用反应路由器重定向以注销用户

Question

当用户单击Are you sure you want to log out? 弹出对话框中的Yes 按钮时，我试图将用户重定向到 URL hostUrl+'logout'。由于我的其他代码部分正在使用 反应路由器，我想知道我是否可以在以下功能中使用相同的功能：

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

this post 中的某个人建议使用Link，但不确定这是否适用于我的情况。

完成上述测试后，我可能需要一个单独的函数 logoutDialogYes 以从弹出对话框中分离 Cancel 和 Yes 的点击。

我的完整代码如下：

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

尝试添加此导入：

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

将导出语句改为：

export default withRouter(Main);

然后，您应该可以通过this.props.history 访问Main 中的历史对象。例如：

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

编辑：

尝试将导出语句替换为：

const MainWithRouter = withRouter(Main);

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

export default MainWrapper;