Bereaksi perubahan routing-url. tetapi tidak merender komponen. saat menyegarkan halaman, halaman ditampilkan dengan sempurna

Ini adalah masalah yang terkenal dalam perutean reaksi. tapi saya belum punya solusi apa pun sejak dua minggu terakhir. Ini masalah besar dan saya berharap ada jawaban untuk ini dengan hormat. Saya memiliki tiga komponen seperti Admin.js, AdminReview.js dan AdminDashboard.js seperti di bawah ini.

Ada file index.js saya.

indeks.js

<Provider store={store}>
    <BrowserRouter basename="/">
        <App/>
    </BrowserRouter>
</Provider>

File Admin.js terletak di file App.js. Ada Admin.js dan memiliki perutean.

Admin.js

return(
        <div>
            <BackdropLoading show={this.props.result} />
            <Switch>
                <Route path="/interactions" component={AdminReview} />
                <Route path="/" exact component={AdminDashbord} />
            </Switch>
        </div>
    )

Saya menggunakan redux di file Admin.js saya seperti di bawah ini.

export default connect(mapStateToProps, mapDispatchToProps)( Admin);

AdminReview.js dan AdminDashboard.js adalah file biasa tetapi ada redux yang digunakan seperti di bawah ini.

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(AdminReview));

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(AdminDashbord));

withRouter adalah komponen tingkat tinggi dan diimpor menggunakan

reaksi-router-dom

untuk mencegah pembaruan blok sesuai dengan dokumentasi reaksi.

Saya menggunakan navbar untuk menavigasi ke rute di atas. Ini adalah file AdminNavbar.js saya.

AdminNavbar.js

<form className="form-inline my-2 my-lg-0">
                        <ul className="navbar-nav" style={{float: 'right',marginBottom:'-10px'}}>


                            <li id="reviewId" className="nav-item" style={liStyle}>
                                <Link to="/interactions" onClick={this.reviewClick}
                                   className="nav-link js-scroll-trigger"
                                   style={linkStyle}>
                                    <small>Interactions</small>
                                </Link>
                            </li>



                            &nbsp;&nbsp;&nbsp;

                            <li id="reportId" className="nav-item"
                                style={{cursor: 'pointer', float: 'right', borderBottom: '1px solid transparent'}}>


                                <Link to="/report" onClick={this.reportClick}
                                   className="nav-link js-scroll-trigger"
                                      style={linkStyle}>
                                    <small>Reports</small>
                                </Link>
                            </li>


                            &nbsp;&nbsp;&nbsp;

                            <li className="nav-item"
                                style={{cursor: 'pointer', float: 'right', paddingTop: '7px'}}>
                                <img src={dollerIcon} alt="icon" style={{width:'20px'}}/>
                                &nbsp;&nbsp;&nbsp;
                            </li>




                            <li id="dashbordId" className="nav-item" style={{
                                cursor: 'pointer',
                                float: 'right',
                                borderBottom: '1px solid transparent',
                                paddingTop: '2%'
                            }}>
                                <ProfileDropdown user="admin"/>

                            </li>


                        </ul>


                    </form>

AdminNavbar juga menggunakan redux seperti di bawah ini.

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(AdminNavbar));

Saat ini saya sedang membaca lebih banyak artikel terkait ini, tetapi saya tidak dapat memperbaiki masalah ini. Tolong adakah yang bisa membantu menyelesaikan ini?


reactjs javascript react-redux react-router
person Vidurajith Darshana    schedule 02.08.2018    source sumber
comment
Panduan ini berisi jawaban yang Anda cari: github.com/ReactTraining/react-router/blob/master/packages/   -  person Praveen Rao Chavan.G    schedule 02.08.2018
comment
@PraveenRaoChavan.G saya mempelajari panduan itu. dan saya menggunakan hoc withRouter untuk mencegah pemblokiran. tapi aku tidak melihat adanya perubahan? bisakah Anda memberi saya solusi lain?   -  person Vidurajith Darshana    schedule 02.08.2018
comment
@ShubhamAgarwalBhewanewala saya melakukan itu, tetapi masalahnya sama!   -  person Vidurajith Darshana    schedule 02.08.2018

Jawaban (1)


arrow_upward
0
arrow_downward

Setelah pengujian yang lama, saya dan teman saya akhirnya menemukan solusi untuk ini. jika kita berbicara tentang struktur komponen kita, seperti di bawah ini.

indeks.js

<Provider store={store}>
<BrowserRouter basename="/">
    <App/>
</BrowserRouter>

Aplikasi.js

<div>
    <MainLayout/>
</div>

MainLayout.js

<div>
    <AdminLayout/>
</div>

AdminLayout.js

<div>
        <BackdropLoading show={this.props.result} />
        <Switch>
            <Route path="/interactions" component={AdminReview} />
            <Route path="/" exact component={AdminDashbord} />
        </Switch>
    </div>

i use the connect of react redux in MainLayout.js,AdminLayout.js and AdminReview.js and AdminDashboard.js so i wrapped those with withRouter hoc of

reaksi-router-dom

itu salah. kita harus membungkus hanya komponen rute yang digunakan. seperti AdminLayout.js. tapi ada masalah, karena komponen anak tidak boleh menerima props karena MainLayout.js juga menggunakan koneksi. jadi akhirnya saya juga membungkus MainLayout.js dari withRouter.sekarang saya membungkus dua komponen dari withRouter seperti AdminLayout.js dan MainLayout.js. maka peruteannya berfungsi dengan sempurna.

person Vidurajith Darshana    schedule 06.08.2018