时间戳

首页 > 解决方案 > 反应 routings-url 的变化。但不渲染组件。刷新页面时完美呈现

javascript - 反应 routings-url 的变化。但不渲染组件。刷新页面时完美呈现

问题描述

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

有我的 index.js 文件。

index.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>
    )

我在我的 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 是高阶组件，它使用导入

反应路由器dom

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

我使用导航栏导航到上述路线。这是我的 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));

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

标签： javascriptreactjsreact-routerreact-redux

解决方案

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

index.js

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

应用程序.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 的连接，所以我用 withRouter hoc 包装了这些

反应路由器dom

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

推荐阅读