![]() But instead, when I change the route, all the components re-render. What I expected would have been that the Component component would not re-render while changing the route, only the NestedComponent (hence, showing only loading 2. Then in the component: const NestedComponent = React.lazy(() => import('./path/to/NestedComponent')) ![]() Then, inside the Component: const NestedComponent = React.lazy(() => import('./path/to/NestedComponent')) įollowing the upgrade guide for react-router-dom v6, I refactored the components above into something as the following: const Component = React.lazy(() => import('./path/to/Component')) ![]() The configuration could be summarized as something like this: const Component = React.lazy(() => import('./path/to/Component')) In the previous versions of react-router-dom, I managed to declare nested routes in child components, and that avoided re-rendering the parent component every time the route changed in the app. In the process of upgrading my react app to react-router-dom v6, I had to refactor how the nested routing is handled.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |