Ad
React Redux Router Pass Props
i've this 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);
i want to pass props from that i create with mapStateToProps, example
on Home pass only data, isPeddingHome and onGetShows, it's posssible?
i try to use
render={(props) => <Home {...props} />}
to pass but not pass nothing to component
Ad
Answer
The argument passed to the render
prop function are the route props
, not the props given to the App
component.
You can spread the App
props and the route props as well to get what you want.
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>
);
};
Ad
source: stackoverflow.com
Related Questions
- → Import statement and Babel
- → should I choose reactjs+f7 or f7+vue.js?
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → .tsx webpack compile fails: Unexpected token <
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → React Native with visual studio 2015 IDE
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
- → How do I determine if a new ReactJS session and/or Browser session has started?
- → Alt @decorators in React-Native
- → How to dynamically add class to parent div of focused input field?
Ad