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

Question

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

有我的index.js文件。

index.js

urllib.quote

Admin.js文件位于App.js文件中。其中有Admin.js并具有路由。

Admin.js

from urllib.parse import quote

print(quote('ó'))
# output: %C3%B3

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

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

AdminReview.js和AdminDashboard.js是普通文件，但如下使用了redux。

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

withRouter是高阶组件，它使用

导入

  

react-router-dom

用于根据响应文档阻止块更新。

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

AdminNavbar.js

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

AdminNavbar还使用了如下的redux。

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

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

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

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的连接 所以我用

的withRouter hoc包装了它们

  

react-router-dom

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