onEnter không được gọi trong React-Router

Question

Ok, tôi chán ngấy.
Phương thức onEnter không hoạt động. Bất kỳ ý tưởng tại sao là điều đó?

// Authentication "before" filter 
function requireAuth(nextState, replace){ 
    console.log("called"); // => Is not triggered at all 
    if (!isLoggedIn()) { 
    replace({ 
     pathname: '/front' 
    }) 
    } 
} 

// Render the app 
render(
    <Provider store={store}> 
     <Router history={history}> 
     <App> 
      <Switch> 
      <Route path="/front" component={Front} /> 
      <Route path="/home" component={Home} onEnter={requireAuth} /> 
      <Route exact path="/" component={Home} onEnter={requireAuth} /> 
      <Route path="*" component={NoMatch} /> 
      </Switch> 
     </App> 
     </Router> 
    </Provider>, 
    document.getElementById("lf-app") 

Edit:

Phương pháp này được thực hiện khi tôi gọi onEnter={requireAuth()}, nhưng rõ ràng đó không phải là mục đích, và tôi cũng sẽ không nhận được các thông số mong muốn.

Answer 1

onEnter không còn tồn tại trên react-router-4. Bạn nên sử dụng <Route render={ ... } /> để có được chức năng mong muốn của mình. Tôi tin rằng ví dụ Redirect có kịch bản cụ thể của bạn. Tôi sửa đổi nó dưới đây để phù hợp với bạn.

<Route exact path="/home" render={() => (
    isLoggedIn() ? (
    <Redirect to="/front"/> 
) : (
    <Home /> 
) 
)}/> 

Answer 2

Từ phản ứng-router-v4 onEnter, onUpdate, và onLeave được lấy ra, theo doc Migrating from v2/v3 to v4:

trên thuộc tính *
Phản ứng Router v3 cung cấp onEnter, onUpdate, và onLeave phương pháp. Chúng chủ yếu tái tạo các phương pháp vòng đời của React.

Với v4, bạn nên sử dụng các phương pháp vòng đời của thành phần được hiển thị bởi a. Thay vì onEnter, bạn sẽ sử dụng componentDidMount hoặc componentWillMount. Nơi bạn sẽ sử dụng onUpdate, bạn có thể sử dụng componentDidUpdate hoặc componentWillUpdate (hoặc có thể componentWillReceiveProps). onLeave có thể được thay thế bằng componentWillUnmount.