登錄後將用戶重定向到指定的網址Reactjs

Question

我正在爲我的前端使用Reactjs的Web應用程序。我阻止用戶訪問某些頁面，例如他們已登錄。我的問題是如何讓用戶訪問他們預期的網址，而不是將他們重定向到我目前所做的主頁。

我的路線是

<Switch> 
    <Route path="/desired-page" component={requireAuth(DesiredPage)} /> 
    <Route path="/new-page" component={requireAuth(NewPage)} /> 
</Switch> 

我requireAuth.js是

export default function(ComposedComponent) { 
    class Authenticate extends React.Component { 
    componentDidMount() { 
     if (!this.props.isAuthenticated) { 
     this.props.addFlashMessage({ 
      type: 'error', 
      text: 'You need to login to access this page' 
     }); 
     this.context.router.history.push('/login'); 
     } 
    } 
    render() { 
     return (
     <ComposedComponent {...this.props} /> 
    ) 
    } 
    } 

    Authenticate.propTypes = { 
    isAuthenticated: PropTypes.bool.isRequired, 
    addFlashMessage: PropTypes.func.isRequired 
    } 

    Authenticate.contextTypes = { 
    router:PropTypes.object.isRequired 
    } 

    function mapStateToProps(state) { 
    return { 
     isAuthenticated: state.auth.isAuthenticated 
    } 
    } 
    return connect(mapStateToProps, { addFlashMessage })(Authenticate); 
} 

Answer 1

所以ReactTraining文檔爲您提供一個location道具代表，其中應用程序是現在，你希望它去的，或即使它在那裏。

在導航到Login路線時，您會提及一個狀態，您可以從哪條路線導航到登錄。你可以做到這一點與

• 重定向到
• history.push
• history.replace

要動態的路線，你可以用history.push通過它像

const location = { 
    pathname: '/login' 
    state: { from: 'Main' } 
} 

history.push(location) 

在你的情況將是

import {withRouter} from 'react-router'; 
export default function(ComposedComponent) { 
    class Authenticate extends React.Component { 
    componentDidMount() { 
     if (!this.props.isAuthenticated) { 
     this.props.addFlashMessage({ 
      type: 'error', 
      text: 'You need to login to access this page' 
     }); 
     const location = { 
      pathname: '/login' 
      state: { from: {pathname: '/Main'} } 
     } 
     this.props.history.push(location); 
     } 
    } 
    render() { 
     return (
     <ComposedComponent {...this.props} /> 
    ) 
    } 
    } 

    Authenticate.propTypes = { 
    isAuthenticated: PropTypes.bool.isRequired, 
    addFlashMessage: PropTypes.func.isRequired 
    } 

    Authenticate.contextTypes = { 
    router:PropTypes.object.isRequired 
    } 

    function mapStateToProps(state) { 
    return { 
     isAuthenticated: state.auth.isAuthenticated 
    } 
    } 
    return connect(mapStateToProps, { addFlashMessage })(withRouter(Authenticate)); 
} 

現在在重新引導回登錄後，你可以用

var {from} = this.props.location.state || {from: {pathname: '/'}} 
this.props.history.push(from) 

注意訪問此PARAM：如果你想使用history對象從道具讓 一定要與withRouter來包裝你的組件HOC。

我希望這有助於:)