Component not rerendering post updation of redux react-router-dom v6 [closed] - reactjs

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 days ago.
Improve this question
Steps - When I change the url path. My url is having nested routes. The component is successfully re-rendering if my url path does not change. When I change my Url path i.e from http://localhost:3000/1/1/library/data to http://localhost:3000/1/1/library/model I don't get the fresh value of redux.
If you guys can check if there any issue with the code why PrivateLayout is not re-rendering post update of redux?
// Route Setting
const Routing = () => {
return (
<Routes>
<Route element={<PrivateLayout />}>
<Route path=':subscriptionId/:packId'>
{privateRoutes.map(renderRoute)}
</Route>
<Route path='/' element={<ScopeSelection />} />
<Route path='*' element={<ScopeSelection />} />
</Route>
</Routes>
);
};
const renderRoute = ({ path, subRoutes, element: Element, hasChildren }) => {
if (!path) return null;
if (subRoutes) {
return subRoutes.map(subRoute =>
renderRoute({ ...subRoute, path: `${path}/${subRoute.path}` })
);
}
if (hasChildren) path += '/*';
return <Route key={path} path={path} element={<Element />} />;
};
const privateRoutes = [
{
name: 'Dashboard',
path: 'dashboard',
icon: DashboardIcon,
subRoutes: [
{
name: 'AI Performance',
path: 'ai-performance',
icon: DashboardIcon,
iconActive: DashboardIcon,
element: AIPerformance,
hasChildren: true,
defaultParams: `${MONITORING}/${UNIT_WAFER}`
}
]
},
{
name: 'Library',
path: 'library',
icon: LibraryIcon,
subRoutes: [
{
name: 'Data Library',
path: 'data',
icon: DataLibIcon,
iconActive: DataLibIconActive,
element: DataLibrary,
hasChildren: true
},
{
name: 'Model Library',
path: 'model',
icon: ModelLibIcon,
iconActive: ModelLibIconActive,
element: ModelLibrary,
hasChildren: true
},
{
name: 'Defect Library',
path: 'defect',
icon: DefectLibIcon,
iconActive: DefectLibIconActive,
element: DefectLibrary
},
{
name: 'Use Case Library',
path: 'usecase',
icon: DefectLibIcon,
iconActive: DefectLibIconActive,
element: UseCaseLibrary
}
]
},
{
name: 'Configuration',
path: `configuration`,
icon: ConfigurationIcon,
element: Configurations,
hasChildren: true,
defaultParams: SYSTEM_CONFIG
},
{
name: 'Notifications',
path: `notifications`,
icon: NotificationsIcon,
element: Notifications
},
{ name: 'Review', path: 'annotation/:annotationType', element: Reviewdata },
{ name: 'Waferbook', path: 'dashboard/wafer-book', element: WaferBook },
{
name: 'Model Library Train Model',
path: 'library/model/train',
element: TrainModel
},
{
name: 'Model Library Re-train Model',
path: 'library/model/retrain/:modelId',
element: RetrainModel
},
{
name: 'Model Library Performance',
path: 'library/model/model-performance',
element: ModelPerformance
}
];
// Here is my private layout
const PrivateLayout = () => {
const accessToken = useSelector(({ user }) => user.accessToken);
/// Here is the issue isStatusWidgetOpen is not re-rendering though my redux has been updated successfully seen via redux chrome extension
const isStatusWidgetOpen = useSelector(
({ statusWidget }) => statusWidget.isWidgetOpen
);
console.log('isStatusWidgetOpen:::', isStatusWidgetOpen);
useEffect(() => {
if (!accessToken) {
refreshToken().then(setSessionLogger);
}
}, []);
return (
<WithCondition
when={accessToken}
then={
<AppLayout>
<Outlet />
</AppLayout>
}
or={<Spinner />}
/>
);
};
package.json
"react-router-dom": "^6.4.5",
"react-redux": "^8.0.4",
"redux-thunk": "^2.4.2",
"react": "^18.2.0",