Issue in Redux with router

Question

I want to use redux with router, So I created Tabs using routing and want to call a reducer method. So here is the flow:

index.js -> App.js -> Tabs.js -> Router(Route -> Home / Contact Us) I have provided the store in index.js, but I wants to call reducer method from Home.js. But it is giving error that it couldn't find that method.

Can someone help me how to use redux with router, consider that route is not done in index.js or app.js.

source code for reference:

home.js

......    
const mapStateToProps = (state) => {
    return {
        sliderfunc: state.sliderfunc
    };
  }

  const mapDispatchToProps = (dispatch) => {
    return {
        previous: (name) => {
            dispatch(previous(name));
        } 
    };
  }
export default connect(mapStateToProps, mapDispatchToProps)(Tabs);

index.js

....
ReactDOM.render( <Provider store = {store}> <App /></Provider>, 
document.getElementById('root'));
....

app.js

....
<Fragment>  
  <Tabs />
</Fragment>
.....

tabs.js

....
 <Router>                
            <Fragment>
                <nav role="navigation" >
                    <NavLink exact to='/' >Home</NavLink>
                    <NavLink to='/gallery' >Gallery</NavLink>
                    <NavLink to='/contactus' >Contact Us</NavLink>
                </nav>
                <Switch>
                    <Route exact path='/' exactly component={Home} ></Route>
                    <Route exact path='/gallery' exactly component= 
{Gallery}></Route>
                    <Route exact path='/contactus' exactly component= 
{ContactUs}></Route>
                </Switch>
                <button onClick = {() => this.props.previous('ij')}>Click 
Here</button> 

            </Fragment>                
        </Router>
....

Thanks Ishan Jain

Some line of code snippet will help people to understand your question. — Bayu

dimpiax dimpiax · Accepted Answer · 2019-01-20T15:02:35

You must use withRouter wrap function around your component.

...
import { withRouter } from 'react-router'

...

export default withRouter(YOUR_COMPONENT)

Issue in Redux with router

1 Answers