React Link doesn't trigger the router changement

Question

In my react app I've tried lot of different router, route, and solution find on internet.

The fact is i'm using <HashRouter> from react-router-dom and redux in my app.

When I change the url in my browser the right route is triggered and the right component is loaded.

The issue :

When i click on <Link> component the url change, the history props on the router change but nothing happenned in the app...

Here are my app architecture and code :

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));

And finally my 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>
}

I already tried with a BrowserRouter, a basic Router with history but always this issue. Don't know if it's due to my project architecture or something else.

UPDATE

Moved withRouter on Main.jsx and got the same issue.

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)

@ShubhamKhatri I just moved withRouter on exporting Main. And got the same issue. — Alexis, Mar 14 '18 at 13:01
@ShubhamKhatri Find the solution... this was due to the Sticky component. When i remove it your solution works. If you reopen the question i can create the answer. Thanks anyway — Alexis, Mar 14 '18 at 13:34

score 0 · Accepted Answer · answered Mar 15 '18 at 12:47

As @ShubhamKhatri said, I needed to export my Main component with withRouter function from react-router.

But there was an other issue, the Link included in the Toolbar component was not triggered the router due to the Sticky Component from react-sticky.

Remove the Sticky component wrapper on the MainApp correct the problem.

Final solution :

exporting 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 doesn't trigger the router changement

1 Answers1