Redux 中的问题与路由器

Question

我想在路由中使用redux，所以我使用路由创建了选项卡并想调用reducer方法。 所以这里是流程：

index.js -> App.js -> Tabs.js -> Router(Route -> Home / Contact Us) 我已经在 index.js 中提供了 store，但是我想从 Home.js 调用 reducer 方法。但它给出了找不到该方法的错误。

有人可以帮我如何在路由中使用 redux，考虑到路由不是在 index.js 或 app.js 中完成的。

源代码供参考：

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>
....

谢谢 伊山耆那教

Answer 1

您必须在组件周围使用withRouter wrap 函数。

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

...

export default withRouter(YOUR_COMPONENT)