นี่เป็นปัญหาที่มีชื่อเสียงในการกำหนดเส้นทางแบบโต้ตอบ แต่ฉันไม่มีวิธีแก้ปัญหาใด ๆ ตั้งแต่สองสัปดาห์ที่ผ่านมา อันนี้เป็นปัญหาใหญ่ และฉันหวังว่าจะได้คำตอบสำหรับสิ่งนี้อย่างจริงใจ ฉันมีสามองค์ประกอบเช่น Admin.js, AdminReview.js และ AdminDashboard.js ตามด้านล่างนี้

มีไฟล์ index.js ของฉัน

ดัชนี js

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

ไฟล์ Admin.js อยู่ที่ไฟล์ App.js มี Admin.js และมีเส้นทาง

ผู้ดูแลระบบ js

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

ฉันใช้ redux ในไฟล์ Admin.js ของฉันดังนี้

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

AdminReview.js และ AdminDashboard.js เป็นไฟล์ปกติ แต่มีการใช้งาน redux ดังนี้

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

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

withRouter เป็นส่วนประกอบที่มีลำดับสูงกว่าและนำเข้าโดยใช้

ตอบสนองเราเตอร์ dom

เพื่อป้องกันการอัพเดตบล็อกตามเอกสารการตอบสนอง

ฉันใช้ navbar เพื่อนำทางไปยังเส้นทางด้านบน นี่คือไฟล์ AdminNavbar.js ของฉัน

ผู้ดูแลระบบNavbar.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 ยังใช้ redux ดังต่อไปนี้

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

ฉันกำลังอ่านบทความเพิ่มเติมที่เกี่ยวข้องกับเรื่องนี้ แต่ฉันไม่สามารถแก้ไขปัญหานี้ได้ โปรดใครก็ได้ช่วยแก้ปัญหานี้ได้ไหม