时间戳

首页 > 解决方案 > React Redux 路由器传递道具

reactjs - React Redux 路由器传递道具

问题描述

我有这个 App.js

const mapStateToProps = (state) => {
 return {
   isPeddingHome: state.getShowsHome.isPeddingHome,
   data: state.getShowsHome.data,
   isPeddingMovies: state.getShowsMovies.isPeddingMovies,
   movies: state.getShowsMovies.movies,
   isPeddingSeries: state.getShowsTv.isPeddingSeries,
   series: state.getShowsTv.series
 }
}

const mapDispatchToProps = (dispatch) => {
 return {
  onGetShows: () => dispatch(getShows()),
  onGetMovies: () => dispatch(getMovies()),
  onGetSeries: () => dispatch(getTvSeries())
 }
}

const App = () =>  {
 return (
  <Router>
    <Switch>
      <Route exact path="/"  component={Home}/>
      <Route path="/movies" component={MoviesPage}/>
      <Route path="/tv" component={tvSeriesPage}/>
     </Switch>
   </Router>
 );
}


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

我想传递我用 mapStateToProps 创建的道具，例如

on Home pass only 数据，isPeddingHome 和 onGetShows，有可能吗？

我尝试使用

render={(props) => <Home {...props} />}

传递但不传递任何东西给组件

标签： reactjsreduxreact-router

解决方案

传递给renderprop 函数的参数是route props，而不是给App组件的 props。

您也可以传播App道具和路线道具以获得您想要的东西。

const App = props => {
  return (
    <Router>
      <Switch>
        <Route
          exact
          path="/"
          render={routeProps => <Home {...props} {...routeProps} />}
        />
        <Route path="/movies" component={MoviesPage} />
        <Route path="/tv" component={tvSeriesPage} />
      </Switch>
    </Router>
  );
};

推荐阅读