score:1
Accepted answer
the issue is likely that the moviepage
component needs to react to the movieid
route param updating.
given route:
<route name="movie" path="/movie/:movieid" exact>
<moviepage />
</route>
moviepage:
use an useeffect
hook to handle any logic/data fetching/etc based on the movieid
param updating.
const { movieid } = useparams();
react.useeffect(() => {
// movieid on initial render or subsequent render when updated
// logic to use movieid and resynchronize any data.
}, [movieid]);
if still using class components, then use the componentdidupdate
lifecycle method. (assumes moviepage
wrapped in withrouter
hoc to receive route props, specifically the match
prop)
componentdidupdate(prevprops, prevstate) {
if (prevprops.match.params.movieid !== this.props.match.params.movieid) {
// logic to use movieid and resynchronize any data.
}
}
Source: stackoverflow.com
Related Query
- react router, how to make page refresh on url change?
- React router change url without page reload
- React Flash Message: How to make the message show without refreshing the page but refresh on 200
- React how to render page after query change in URL
- How to make react router Link load page like anchor tag?
- How to make Meteor React inline svg element click link to page without refresh whole page
- How to change background based on page url react js?
- React Router changes URL but doesn't update the page unless it was refresh from browser
- How to change the URL with out actually routing to different page in react
- how to listen page url change without page refresh in react?
- How to make react router, change what file is rendering based on the url
- How do I make react router v6 load elements without having to manualy refresh the url?
- How can I make react router direct to my error page when an undefined route is specified?
- how to catch react router change event from outside page
- Netlify blank page when refresh url with more than one path param using react router
- React Router URL not found if refresh page - Create React App
- How does react router handle url change without causing the browser to request
- React Router page address change but doesn't refresh
- React Router how to dynamically change search part of url
- how to debug react router not loading component on url change
- How to make React page render only change component instead of the whole page?
- How do I make my parent component re-run an api call on page refresh using React Router?
- how do i bring the root url when i refresh the page in react
- How can I change URL without render using React Router 6?
- How to make a nested react router component load to a new page and not half-way down the page
- React Router v5: 404 when use url directly or refresh page on route different from "/"
- How to fetch the new data in response to React Router change with Redux?
- React | How to detect Page Refresh (F5)
- How to hide navbar in login page in react router
- React router - Update URL hash without re-rendering page
More Query from same tag
- How to update state on disabled field in react
- Working with the same ReactJS form component on the same page
- React Hooks and Fetch: How to update a table based on a user input from an API search
- How to call a method when a DOM element is destroyed in React
- Use effect for every time that location.pathname changes
- Why do I get 'Expected the reducer to be a function.'?
- How to export a function and an array
- Apollo mutation not appearing in props
- How can I unit test a component which dispatches an action in reactjs/redux app?
- Python Tornado Backend, WebSocket Listener and MQTT Client at the same time
- Upload files, according to characteristics and be able to delete or add them in ReactJS
- Rollup error with Styled Components - Error: 'ThemeContext' is not exported by node_modules\styled-components\dist\styled-components-macro.esm.js
- Multiple times render in react functional component with hooks
- React - onChange event & function not working on imported Input component
- react-scss : display problem of an <h1> with blur and transform, on "EDGE" only
- How to package to 'production' my react website with Webpack?
- Reactjs - Move to next page after login
- React: following DRY in React when fetching data from API
- Why does this Material-UI Grid item move when I click on it?
- UnhandledPromiseRejectionWarning: data and salt arguments required
- Avoid multiple useEffect on component on component load
- Best way to request unknown number of API pages in useEffect hook
- React js, set class based on value
- SCRIPT1006: Expected '() React app with webpack and Babel
- How do I unit test a HOC having an async componentDidMount using jest?
- React presentational (stateless) component using input tags without state?
- HTML BootStrap Navbar not displaying as expected
- `npx create-react-app` says it requires "Node 14 or higher" but I'm running 17.4.0. How can I fix this?
- I can print and variable but I cannot set state with it and return Error Undefined
- Angular 2+ , Router navigates to destinated route but wont load component