Chuyển hướng willTransitionĐể trong phản ứng-router 2.4.0?

Question

Tôi hiện đang sử dụng "react-router": "^2.4.0" trên ứng dụng trò chuyện của mình và nhầm lẫn về cách chuyển hướng khi không có người dùng. Tôi không nghĩ rằng chuyển hướng hoạt động trong "^2.4.0".

Tôi có nên sử dụng onEnter móc trên số trò chuyện đường dẫn của mình không?

Something như thế này:

<Route path="chat" component={Chat} onEnter={Chat.willTransitionTo}/> 

routes.js

<Route path="/" component={App} > 
    <IndexRoute component={Chat} /> 
    <Route path="chat" component={Chat} /> 
    <Route path="login" component={Login} /> 
</Route> 

Chat.jsx

static willTransitionTo(transition){ 
    var state = ChatStore.getState(); 
    if(!state.user){ 
    transition.redirect('/login'); 
    } 
} 

Answer 1

tôi đã làm cho nó hoạt động bằng cách sử dụng setRouteLeaveHook như nó nói ở đây : https://github.com/ReactTraining/react-router/blob/master/docs/guides/ConfirmingNavigation.md

return false to prevent a transition w/o prompting the user

Tuy nhiên, họ quên đề cập rằng móc cũng phải được đăng ký, xem here và here.

Chúng ta có thể sử dụng để thực hiện các giải pháp của riêng của chúng tôi như sau:

class YourComponent extends Component { 
    constructor() { 
    super(); 

    const {route} = this.props; 
    const {router} = this.context; 

    this.unregisterLeaveHook = router.setRouteLeaveHook(
     route, 
     this.routerWillLeave.bind(this) 
    ); 
    } 

    componentWillUnmount() { 
    this.unregisterLeaveHook(); 
    } 

    routerWillLeave() { 
    // return false to prevent a transition w/o prompting the user, 
    // or return a string to allow the user to decide: 
    if (!this.state.isSaved) { 
     return 'Your work is not saved! Are you sure you want to leave?' 
    } 
    } 
    ... 
} 

YourComponent.contextTypes = { 
    router: routerShape 
}; 

Answer 2

Có ít nhất một lỗi chính tả:

tansition.redirect('/login'); 

nên là:

transition.redirect('/login'); 

Bạn cũng nên kiểm tra ví dụ auth-dòng chảy của phản ứng-router: https://github.com/reactjs/react-router/tree/master/examples/auth-flow