score:0
if using redux, the redux connect hoc overrides the shouldcomponentupdate
lifecycle method on your component and checks for props and state change this can confuse the react router. something like a user clicking a link will not necessarily change the state or props as is, leading to not re-rendering the components in the routeing context.
the documentation for react router states a solution for this problem:
wrap the component with the withrouter
hoc
import { route, switch, withrouter } from 'react-router-dom';
import { connect } from 'react-redux';
const main = (props) => (
<main>
<switch>
<route exact path='/' component={sample_home}/>
<route path='/dashboard' component={sample_dashboard}/>
</switch>
</main>
)
export default withrouter(connect()(main))
also, as an enclosing route component will pass props with a location
property, you can pass that into the child component and that should achieve the desired behaviour.
https://reacttraining.com/react-router/web/guides/dealing-with-update-blocking
score:3
i think the problem here is with redux .. because it blocks rerendering the components as long as the props didn't change,
this is because connect() implements shouldcomponentupdate by default, assuming that your component will produce the same results given the same props and state.
the best solution to this is to make sure that your components are pure and pass any external state to them via props. this will ensure that your views do not re-render unless they actually need to re-render and will greatly speed up your application.
if that’s not practical for whatever reason (for example, if you’re using a library that depends heavily on react context), you may pass the pure: false option to connect():
function mapstatetoprops(state) {
return { todos: state.todos }
}
export default connect(mapstatetoprops, null, null, {
pure: false
})(todoapp)
here are links for more explanation:
Source: stackoverflow.com
Related Query
- why react router url changes but component does not load in my nested router app
- React Router Link Not Rendering the Component but changes the URL
- Why React-router v4 <Link/> does not work (Changes url but not rendering content)?
- React Router useHistory. History.push changes url but does not load component
- React Router Dom & Firebase Auth: history.push changes url but does not render new component when called after firebase auth create account
- React router 4 - Why is my component only rendered on manually setting the url but not on clicking a Link with same url?
- why does my react router links work in drawer but not header
- React Routes are not working properly the URl changes but its rendering the one same page on any link i click ,
- React router url changes correctly but component not being rendered from button component link
- React Link changes URL but does not render page
- React router changes url but not view
- React Router work on reload, but not when clicking on a link
- React Router v5: history.push() changes the address bar, but does not change the page
- React router changes url but not the view (only on Internet Explorer 11)
- React router does not change view, but url is changed - App is load inside iframe
- React URL changes but component does not render
- React js Router changes url but not loading page
- react router changes url but not navigating to page
- React Router does not update component if url parameter changes
- React Router Link Right Click does not work
- React router goes to proper URL but does not update the view
- Link to changes state but does not change URL
- React router changes url but not loading view
- React reach router link tag updates url but not the component
- Why does arrow function work but regular function does not React JS
- Clicking on link changes route but not Component itself - React Hook Router
- React Router history.push() changed url but did not rendered components content
- React Router Link changes URL but doesn't render Component - Rest Countries API
- Link props when passed does not work when browser back and forth is clicked React router v4
- React Styled Components: Justify content does not work but align items & flex-direction do?
More Query from same tag
- React - How to avoid object getting same key? - Todo
- Posting Form data as json to nested serializer from ReactJS
- TypeError: Cannot read property 'params' of undefined in Details page - Basic CRUD app in React / Express
- React tests are passing with incorrect props
- Can't iterate React component to create table. Unexpected token
- Having trouble passing parent function to child component
- useState with boolean value in react
- Setting baseURL for axios for use with Stripe / React
- How add new object property while updating state in React
- How to call api from each of the element rendered
- Events firing twice inside axios interceptor
- Re-render component with an addition Grid Row
- Updating PWA created with cra-template-pwa
- React.js: JSON request not rendering?
- React Django CSRF token missing or incorrect
- React Antd Modal Property 'children' does not exist on type 'IntrinsicAttributes & ModalProps'
- How to render multiple checkboxes in React?
- Incorrect use of react hooks but no hook errors/faults
- getInitialProps never gets called...what am I doing wrong?
- React Router: How to render different Components with different parameters
- How to use React.js to render server-side template on Sails.js?
- How to fix ReactJS filtered search that isn't working properly
- How to develop Reusable Bootstrap-like Components
- Passing objects as props while retaining keys, using object map
- My Axios call is returning a 404 error, React/Express
- Import JSON file in React
- How to render FluentUI controls in a HTML page similar to rendering React Components in a script tag inside a Div
- how to stop a timer in setInterval by click then resume by click again?
- Insert tab character into SlateJS text editor
- Module not found: Can't resolve './pages