React Link 不会触发路由器更改

Question

在我的 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)

Answer 1

正如@ShubhamKhatri 所说，我需要从 react-router.

导出带有 withRouter 函数的主要组件

但是还有一个问题，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>

React Link 不会触发路由器更改

React Link doesn't trigger the router changement

reactjs

redux

react-router-dom