Đặt tuyến đường ban đầu bằng phản ứng-bộ định tuyến

Question

Tôi có câu hỏi về việc thiết lập các tuyến đường ban đầu với bộ phản ứng-bộ định tuyến (kết hợp với Redux). Tôi đã có một vài tuyến đường được thiết lập và dựa trên trạng thái từ cửa hàng Redux của tôi, tôi cần luôn chuyển hướng người dùng đến một tuyến đường nhất định khi tải trang.

Cách tuyến đường của tôi đang thiết lập như sau:

<Provider store={store}> 
    <Router history={history}> 
     <Route path="/" component={App} onEnter={redirectToInitialRoute}> 
      <Route path="/send" component={OverviewPage} /> 
      <Route path="/thanks" component={ConfirmPage} /> 
      <Route path="/:categoryIdentifier" component={CategoryPage} /> 
     </Route> 
    </Router> 
</Provider> 

Tôi đã thêm chức năng OnEnter để định tuyến gốc của tôi. Tôi đã thực hiện việc này vì tôi luôn cần phải chuyển hướng khi tải trang, độc lập với trang mà người dùng đang nhập vào ứng dụng. Cách chức năng onEnter của tôi được thiết lập như sau:

function redirectToInitialRoute (nextState, replace) { 
    if (condition) { 
     replace('/send'); 
    } 
    else if (anotherCondition) { 
     replace('/thanks'); 
    } 
} 

Tuy nhiên điều gì xảy ra với thiết lập này là (ví dụ) 'anotherCondition' được đáp ứng và chuyển hướng đến '/ thanks'. Vì onEnter được truyền trên tuyến gốc, redirectToInitialRoute được kích hoạt lại. Vì 'anotherCondition' vẫn đúng, chuyển hướng xảy ra lần nữa gây ra vòng lặp chuyển hướng.

Tôi đã tự hỏi điều gì sẽ là cách tốt nhất để giải quyết vấn đề này? Bất kỳ trợ giúp nào cũng được đánh giá rất cao. Cảm ơn trước!

Answer 1

Làm cách nào để thêm tuyến đường chỉ mục và sau đó chuyển hướng trên giá?

<Provider store={store}> 
    <Router history={history}> 
     <Route path="/" component={App} onEnter={redirectToInitialRoute}> 
      <IndexRoute component={Welcome} />   
      <Route path="/send" component={OverviewPage} /> 
      <Route path="/thanks" component={ConfirmPage} /> 
      <Route path="/:categoryIdentifier" component={CategoryPage} /> 
     </Route> 
    </Router> 
</Provider> 

Sau đó, trong phần Chào mừng bạn:

componentDidMount: function() { 
    if (condition) { 
     browserHistory.push('/here'); 
    } else { 
     browserHistory.push('/there'); 
    } 
}