登录后将用户重定向到指定的网址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。

我希望这有助于:)