React Router - Làm thế nào để đạt được điều hướng giống như tab?

Question

Tôi mới sử dụng React và phát triển ứng dụng đầu tiên của mình bằng React. Ứng dụng của tôi có một thành phần tab với 4 tab và nội dung của từng tab được thiết lập như một thành phần riêng biệt. Bây giờ tôi đang thay thế tab bằng 4 tuyến đường khác nhau. Vì vậy, tôi đã loại bỏ các tab và sử dụng phản ứng-router để thiết lập 4 tuyến đường, một cho mỗi trong số 4 thành phần.

Với các tab, nội dung của tab sẽ duy trì trạng thái khi điều hướng đến một tab khác và quay lại. Ví dụ: giả sử tab có danh sách và người dùng đã cuộn xuống cuối danh sách. Nếu người dùng điều hướng đến một tab khác và quay lại, danh sách sẽ vẫn được cuộn xuống dưới cùng. Đây là hành vi mong muốn cho ứng dụng của tôi.

Tuy nhiên, tôi không thể đạt được hành vi này với các tuyến đường. Tôi nhận thấy rằng khi tôi điều hướng từ một lộ trình đến một tuyến đường khác, các thành phần được tái tạo lại (không chỉ được hiển thị lại). Tôi có thể nói điều này bởi vì hàm tạo của thành phần được gọi mỗi khi tuyến đường cho thành phần đó hoạt động.

Tôi muốn đạt được hành vi giống tab. Tôi biết rằng đối với Angular có một thư viện UI-Router-Extras cung cấp Deep State Redirect (cho chuyển hướng giống như tab). Nó hoạt động thực sự tốt trong dự án Angular của tôi. Nhưng tôi không thể tìm thấy một lựa chọn tương tự cho React. Tôi đã thử phản ứng-router và phản ứng-router-thành phần và cả hai tái khởi tạo một thành phần khi tuyến đường của nó trở nên hoạt động.

Có giải pháp nào để đạt được hành vi giống như tab cho các tuyến đường trong React không?

Answer 1

Cá nhân, tôi đã chọn bỏ qua bộ phản ứng-bộ định tuyến trong trường hợp này và tạo thành phần cha với trạng thái chứa tab hiện tại để hiển thị, trong khi chỉ hiển thị tab đang hoạt động.

Dưới đây là một ví dụ rất đơn giản

<div 
     style={{display: this.state.currentTab === 'component_a' ? 'block' : 'none'}} 
    > 
     <ComponentA /> 
    </div> 
    <div 
     style={{display: this.state.currentTab === 'component_b' ? 'block' : 'none'}} 
    > 
     <ComponentB /> 
    </div> 

Answer 2

Bạn có hai lựa chọn, sử dụng Redux, hoặc hiển thị/ẩn các thành phần dựa trên các tab.

Heres một ví dụ để hiển thị/ẩn các thành phần

{this.state.showAboutMe ? <AboutMeComponent navigation={this.props.navigation} props={this.props.user} /> : undefined}