Phản ứng Router v4 Redirect không làm việc

Question

Tôi có một con đường mà chuyển hướng sau khi kiểm tra một điều kiện như thế này

<Route exact path="/" render={()=>(
Store.isFirstTime ? <Redirect to="intro" /> : <Home state={Store}/>)}/> 

Url thay đổi khi điều kiện là đúng nhưng thành phần không được gắn kết. Phần còn lại của mã thành phần như sau.

render() { 
    return (
     <div> 
     ... 
     <Route exact path="/" render={()=>(
      Store.isFirstTime ? <Redirect to="intro" /> : <Home state={Store} />   
     )} /> 
     <Route path="/intro" render={()=>(<IntroWizard state={Store.userInfo}/>)} /> 
     <Route path="/home" render={()=>(<Home state={Store}/>)} /> 
     <Route render={()=>(<h1>404 Not Found</h1>)} /> 
     <Footer /> 
     </div> 
    ); 
    } 

Component App của tôi là kín với trong BrowserRouter như thi

ReactDOM.render(<BrowserRouter> 
    <App/> 
</BrowserRouter>, 
    document.getElementById('root') 
); 

khi tôi nhấn url trực tiếp trong trình duyệt như 'localhost: 3000/giới thiệu' thành phần được cài đặt thành công, nhưng khi nó đi qua chuyển hướng nó không hiển thị thành phần. Làm thế nào để tôi sửa chữa nó?

Chỉnh sửa

Vì vậy, một chi tiết bị thiếu và tôi đã thử tạo một dự án khác để tái tạo sự cố. phần App của tôi là một người quan sát từ mobx-phản ứng và nó được xuất khẩu như hình dưới đây

let App = observer(class App { ... }) 
export default App 

Tôi đã tạo repo này với một mẫu mã để tạo lại vấn đề, bạn có thể sử dụng nó https://github.com/mdanishs/mobxtest/

Vì vậy, khi các thành phần được quấn vào mobx-phản ứng quan sát chuyển hướng không làm việc gì khác nó hoạt động tốt

Answer 1

Người hỏi đã đăng một số issue trên GitHub và nhận được hình thức này chưa được xuất bản rõ ràng hidden guide (chỉnh sửa: bây giờ published) cũng đã giúp tôi. Tôi đăng nó ở đây vì tôi gặp vấn đề tương tự và muốn người khác tránh đau đớn.

Vấn đề là phản ứng mobx và phản ứng-redux đều cung cấp các chức năng shouldComponentUpdate() riêng của mình mà chỉ kiểm tra các thay đổi về prop, nhưng bộ phản ứng sẽ gửi trạng thái xuống thông qua ngữ cảnh. Khi vị trí thay đổi, nó không thay đổi bất kỳ đạo cụ nào, vì vậy nó không kích hoạt cập nhật.

Cách này là chuyển vị trí xuống dưới dạng giá đỡ. Hướng dẫn ở trên liệt kê một số cách để làm điều đó, nhưng đơn giản nhất là chỉ cần quấn container với các thành phần bậc cao withRouter():

export default withRouter(observer(MyComponent)) 

hoặc, đối với Redux:

export default withRouter(connect(mapStateToProps)(MyComponent)) 

Answer 2

Bạn đang thiếu một/trước giới thiệu

<Route exact path="/" render={()=>(
    Store.isFirstTime ? <Redirect to="/intro" /> : <Home state={Store} />   
)} /> 

Answer 3

Hãy cẩn thận khi soạn Bộ định tuyến với các thành phần khác như nhà cung cấp dịch vụ, nhà cung cấp dịch vụ chủ đề, v.v. Sau một thời gian tôi thấy rằng Ứng dụng của bạn phải được Bộ định tuyến bao bọc chặt chẽ như sau:

<Provider store={store}> 
    <ThemeProvider theme={theme}> 
    <TranslationProvider 
     namespaces={['Common', 'Rental']} 
     translations={translations} 
     defaultNS={'Common'} 
    > 
     <Router> 
     <App /> 
     </Router> 
    </TranslationProvider> 
    </ThemeProvider> 
</Provider> 

Hy vọng điều này sẽ giúp ai đó