score:0
the error is in how you pass the props. in your example,
<route path="/cats" render={ <cats data={this.state.cats} /> } />
the data prop would essentially be ignored. however, if you pass it like this:
<route
path="/cats"
render={(props) => <cats {...props} data={this.state.cats} />}
/>
you'll have access to it. however, to keep things simpler, might i suggest moving the actual data fetch function inside the component that needs it? this way, if you're fetching let's say 20 different things, like cats, dogs, mice, depending on your setup, you'd render block the entire application for data you may or may not need.
score:2
your code looks fine, except that the render
prop on route
needs to be a function.
<route path="/cats" render={ () => <cats data={this.state.cats} /> } />
if you don't need it to be a function, you can use component
instead:
<route path="/cats" component={ <cats data={this.state.cats} /> } />
Source: stackoverflow.com
Related Query
- need assistance on react router
- Need to navigate link while clicking material ui table row in React Router 4
- Why do we need a "root" scene in react native router flux
- React Router v4. Need to prevent component re-rendering (trying to build instagram-like image grid)
- I need a nested route in react router V5
- Does props.history.listen in React Router need to be cleaned up in useEffect? If so, what is the right way to do it?
- React Router 6 - need to refresh page so that content changes
- Need to apply "active" class when in a exact link to NavLink in react router V6
- Problems that need to be refreshed when using history.push() in react router
- React router v5: need a nested route in dynamic routes
- How can I use React context to get the router exactly and only where I need it?
- Programmatically navigate using React router
- How to push to History in React Router v4?
- React Router with optional path parameter
- Programmatically navigate using react router V4
- Nested routes with react router v4 / v5
- React Router v4 - How to get current route?
- Multiple path names for a same component in React Router
- How to implement authenticated routes in React Router 4?
- react router v^4.0.0 Uncaught TypeError: Cannot read property 'location' of undefined
- react router doesn't work in aws s3 bucket
- React router changes url but not view
- How to set the DefaultRoute to another Route in React Router
- React Router v4 <NavLink> vs <Link> benefits
- React Router Pass Param to Component
- How to redirect in React Router v6?
- react router v4 default page(not found page)
- react router difference between component and render
- React router redirect after action redux
- React router nav bar example
More Query from same tag
- Delay Auth0 redirect in React until after user credentials have been received
- React useState not rendering with objects
- can not get /about inr react product mode
- Where to set cookie in Isomorphic Redux Application?
- React sortable hoc - onClick how to change states
- Weird behavior of material-ui slider on mobile with custom Thumb component
- Deployment with Nextjs and themed semantic-ui
- Encounterd "TypeError: this.props.newClient is not a function" on React JS
- How to get data out of object in React
- Switching layouts in React while maintaining state
- How to render in code generated SVG on ReactJS?
- React / Axios - "code": 400, "message": "Required parameter: part"
- unable to select item from react-native-dropdown-picker
- How to hide and show progress bar when fetching data from network?
- How to implement a 'load more' functionality in react with redux?
- How can I add computed state to graph objects in React Apollo?
- React Login & Signup Form ant design onFinish not triggering
- Possible to dispatch an action without connect?
- ReactJs feedback with SVG Emojis
- How to filter MongoDB Charts with ObjectID?
- this.refs no longer available in componentDidMount?
- Higher Order componnt does not dilver InputList
- mapStateToProps and variable is not defined React-Redux
- How to Focus TextInput in React Native Android
- Display data into dropdown using JSON payload data
- fullcalendar - NextJS - Dynamic import doesn't show calendar
- ReactJS - sorting - TypeError: 0 is read only
- I am getting an error in my map function returning React component
- Dynamic Form with initial values
- How to do word wrap with react-pdf