React Link 不会触发路由器更改答案

【问题标题】：React Link doesn't trigger the router changementReact Link 不会触发路由器更改
【发布时间】：2018-08-22 21:02:58
【问题描述】：

在我的 react 应用程序中，我尝试了很多不同的路由器、路由和在互联网上找到的解决方案。

事实是我在我的应用程序中使用来自react-router-dom 的<HashRouter> 和redux。

当我在浏览器中更改 url 时，会触发正确的路由并加载正确的组件。

问题：

当我点击<Link> 组件时，url 发生了变化，路由器上的history 道具发生了变化，但应用程序中没有发生任何事情......

这是我的应用架构和代码：

MainApp.jsx

render(){
  <Provider store={store}>
    <HashRouter>
       <div className="main-app">
         <StickyContainer> 
           <Header toggleHelp={() => this.toggleOverlay()} />
           <Sticky>
                 <Toolbar /> //Here are my <Link/>     
           </Sticky>  
           <App/>
           <Footer />
         </StickyContainer>
       </div>
     </HashRouter>
  </Provider>
}

App.js

import React from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as Actions from 'Actions';
import Main from 'Components/Main/Main';
import {withRouter} from 'react-router-dom';

const App = ({elements, actions,documents,filters}) => (
    <div>
      <Main elements={elements} actions={actions} documents={documents} filters={filters} />
    </div>
)

const mapStateToProps = state => ({
    elements: state.elements,
    documents: state.documents,
    filters:state.filters
});

const mapDispatchToProps = dispatch => ({
    actions: bindActionCreators(Actions, dispatch)
});

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

最后是我的 Main.jsx

render(){
   <div className="main-authenticated">
       <Switch>
          <Route path="/home" component={Home} />
          <Route path="/reporting" component={Reporting} />
          <Route path="/about" component={About} />
          <Route path="/disconnect" component={ErrorPage} />
       </Switch>
   </div>
}

我已经尝试过使用BrowserRouter，基本的Router 和history，但总是这个问题。不知道是因为我的项目架构还是其他原因。

更新

在 Main.jsx 上移动了 withRouter 并遇到了同样的问题。

Main.jsx

render(){
   <div className="main-authenticated">
       <Switch>
          <Route path="/home" component={Home} />
          <Route path="/reporting" component={Reporting} />
          <Route path="/about" component={About} />
          <Route path="/disconnect" component={ErrorPage} />
       </Switch>
   </div>
}

export default withRouter(Main)

【问题讨论】：

将 withRouter 与 Main.js 一起使用，同时检查重复项
@ShubhamKhatri 我刚刚在导出 Main 时使用了路由器。并遇到了同样的问题。
@ShubhamKhatri 找到解决方案...这是由于 Sticky 组件。当我删除它时，您的解决方案有效。如果您重新打开问题，我可以创建答案。还是谢谢

标签： reactjs redux react-router-dom

【解决方案1】：

正如@ShubhamKhatri 所说，我需要使用withRouter 函数从react-router 导出我的主要组件。

但是还有一个问题，包含在Toolbar 组件中的Link 由于来自react-sticky 的Sticky 组件而没有触发路由器。

删除MainApp 上的Sticky 组件包装器更正问题。

最终解决方案：

导出 Main.jsx

class Main 
[...]

export default withRouter(Main);

MainApp.jsx

 <Provider store={store}>
      <HashRouter>
         <div className="main-app">
           <Header />
           <Toolbar/>
           <App>
           <Footer />
        </div>
     </HashRouter>
  </Provider>

【讨论】：