score:1
i assume when you say "the component only executes once" you mean it mounts only once.
since you didn't show your code, i can only assume you have used one of the lifecycle methods: componentwillmount
| componentdidmount
these methods only trigger once on component mount. given your route configuration, whenever you switch to a different url, since it's using the same component, it will not unmount and mount again (thus your loading logic is only triggered once), but simply re-render if its props have changed. that's why you should plug on a lifecycle method that is triggered on every prop change (like componentwillreceiveprops
).
try this instead:
class tvpage extends component {
constructor(props) {
super(props);
}
componentwillmount() {
// load your data/state (initial)
this.props.loadmydata(this.props.whatever.data);
}
componentwillreceiveprops(nextprops) {
if (this.props.whatever.mystatus !== nextprops.whatever.mystatus) {
// load your data/state (any page change)
nextprops.loadmydata(nextprops.whatever.data);
}
}
render() {
// render whatever you want here
}
}
componentwillmount
will trigger on mount (initial load), and componentwillreceiveprops
will trigger at least every time your props change.
score:0
look at this example for react router using query params : https://github.com/reactjs/react-router/blob/master/examples/query-params/app.js
in your componentdidmount function inside your tvpage component, i would get the data passed as params in the url which then updates the state of the component. every time the state changes within the component, it will reload itself.
example component :
class tvpage extends component {
constructor(props) {
super(props);
this.state = {
data: null
}
}
componentdidmount() {
// from the example path /tvpage/:id
let urldata = this.props.params.id;
this.setstate({data: urldata})
}
render() {
return (
<div>
{this.state.data}
</div>
);
}
}
Source: stackoverflow.com
Related Query
- Reactjs route for asterisk executes only once
- ReactJS - How can I implement pagination for react with keep state when route change?
- How to implement remember me functionality for authentication in ReactJS when i only receive jwt token from backend api
- React constructor called only once for same component rendered twice
- Next.JS useRouter will only returns an empty object for a dynamic route
- Show overlay only once on page entrance (not route change). HowTo?
- ES6 React: Will ES.Next's @autobind bind methods only once for each instance?
- TinyMCE with ReactJs - onChange event only firing once
- How to make default route in ReactJS for child route concept
- Within a ReactJS component, when looping through a props array, I can only use the shorthand syntax for the loop. Why is this?
- React route v6 have NavBar for only some routes
- Calling one hook multiple times but running logic inside it only once for given render phase
- Apply CSS only when for specific route
- ReactJS with ES6 class in state: change only once
- useEffect pushing value to array only once ReactJs
- React fires change event for radio button only once
- Tensorflowjs with ReactJs - only returning one prediction for video element
- search in reactjs only showing for the last condition but not getting results for above lines
- Routing - Reactjs - only first Route works
- ReactJS setState only once
- How to import css for only any component in Reactjs
- ReactJS - I can't pass prop trought Route for a child component
- only one child route displaying in react? displays component for a different route instead of its own
- React for loop only runs once regardless of array size
- Restrict React route for the development only
- react router and redux dispatch() is running from all routes once instead of only current route
- Set state for only for self data into map on reactjs
- React-bootstrap: onChange invoked only once for "select"
- addClass only once onClick ReactJS
- React onClick event to only fire for the clicked div and not the other once
More Query from same tag
- How to Format Jsx back too what it used to be
- Add a loader while an if else statement is being evaluated
- Why is getState() not a function?
- Rerender view on browser resize with React
- Is it good idea to use useEffect in all components to prevent unwanted re-renders in components?
- Loading spinner with react useEffect hook and Redux and without useState hook
- React-testing-library not rendering computed styles from stylesheet
- Using Aysnc/await with Props
- CORS issue using create-react-app when trying to use an image from another URL
- How to set a label value inside the input filed with a datalist
- setState is not permanent
- OnClick event not working in map function react
- How to Update my Todo using Redux and React
- Raw HTML passed with dangerouslySetInnerHTML React & Electron "lowercased"
- Creating custom component library with object prefix in Reactjs
- Can't resolve '@material-ui/core/TableContainer
- how to hide empty label in react-bootstrap-typeahead
- selecting dynamic class names generated by react from a user script?
- How to FadeOut / FadeIn content with ReactJS at onClick event?
- Add new columns container every 3 column elements in React.js with Bulma.css
- Inject theme props with Theme provider in a external packages
- React - How to render components inside a function outside of render plus execute same function outside of render?
- Show popup with info brought from a table element in react.js
- Difference between .then and async/await in React
- Updating two states at the same time puts the component in infinite loop - REACTJS WITH DJANGO BACKEND
- input field validation on reactjs
- Mobx don't update observable array
- Managing React states correctly giving strange error
- Gatsby & React Context API: Using Context to set languages for internationalization
- not able to receive data in providers