反应路由URL的变化。 但不渲染组件。 刷新页面时，它呈现完美

Question

这是反应路由中的一个著名问题。 但是自最近两周以来我没有任何解决方案。这是一个大问题，我希望对此有任何答案。 我有以下三个组件，例如Admin.js，AdminReview.js和AdminDashboard.js。

有我的index.js文件。

index.js

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

Admin.js文件位于App.js文件中。存在Admin.js并且具有路由。

Admin.js

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

我在Admin.js文件中使用了redux，如下所示。

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是高阶组件，它使用

反应路由器域

根据反应文档防止块更新。

我使用导航栏导航到上述路线。这是我的AdminNavbar.js文件。

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还使用了如下的redux。

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

我目前正在阅读与此相关的更多文章，但是我无法解决此问题。请任何人可以帮助解决此问题？

Answer 1

经过长时间的测试，我和我的朋友终于找到了解决方案。 如果我们谈论我们的组件结构，则如下所示。

index.js

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

App.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>

我在MainLayout.js，AdminLayout.js和AdminReview.js和AdminDashboard.js中使用react redux的连接，所以我将它们与Router hoc一起包装

反应路由器域

那是错的。 我们应该只包装路由使用的组件。 例如AdminLayout.js。 但是有问题，因为不应该接收子组件，因为MainLayout.js也使用connect。 所以最后我也包装了withRouter的MainLayout.js。现在我包装了withRouter的两个组件，例如AdminLayout.js和MainLayout.js。 那么路由就可以完美地工作了。