I'm working on the web-app that has a role choice when you visit for the first time. After I choose the admin role for example, it sets the value of userRole in localStorage.
Here is App you can see that depending on the current role there are different routes.
After I have the role chosen, I'm redirected to the '/' route and I actually want to see the component that renders this route which is TableBoard in this case, but instead I firstly get render={() => <Container>its from app.tsx {route.component}</Container>}. So on the first render I only see its from app.tsx, then I refresh the page and everything is fine.
How to fix routing here?
Please ask if something is unclear.
function App() {
const currentRole = useReduxSelector(state => state.auth.currentRole);
const accessToken = localStorage.getItem('accessToken');
const role = localStorage.getItem('role');
const getCurrentRoutes = () => {
if (role === 'userCollaborator') {
return AccRoutes;
} else if (role === 'userAdmin') {
return AdminRoutes;
} else if (role === 'userHr') {
return HRRoutes;
} else if (role === 'userPartner') {
return Routes;
} else {
return RoutesAuth;
}
};
const routes = getCurrentRoutes();
let routesComponents;
if (currentRole && accessToken) {
routesComponents = routes?.map(route => {
return (
<Route
key={route.name}
exact
path={route.path}
render={() => <Container>its from app.tsx {route.component}</Container>}
/>
);
});
} else {
routesComponents = routes?.map(route => {
return (
<Route
key={route.name}
exact
path={route.path}
component={route.component}
/>
);
});
}
return (
<BrowserRouter>
<Provider store={store}>{routesComponents}</Provider>
</BrowserRouter>
);
}
export default App;
Component that should be rendered for the route I'm redirected:
export const TableBoard = () => {
return (
<Container>
<div>here I have a lot of other content so it should be rendered as props.children in Container</div>
</Container>
);
};
And the code for Components.tsx looks this way:
const Container: React.FC<ContainerProps> = ({children}) => {
return (
<div>
{children}
</div>
);
};
export default Container;
Because localStorage.getItem('role') won't make react rerender your component. You can make a provider to handle this situation.
For example:
// RoleProvider.jsx
const RoleContext = React.createContext();
export const useRoleContext = () => {
return React.useContext(RoleContext)
}
export default function RoleProvider({ children }) {
const [role, setRole] = React.useState();
React.useEffect(
() => {
setRole(localStorage.getItem('role'));
},
[setRole]
)
const value = React.useMemo(
() => ({
role,
setRole: (role) => {
localStorage.setItem('role', role);
setRole(role);
}
}),
[role, setRole]
);
return (
<RoleContext.Provider value={value}>
{children}
</RoleContext>
)
};
Then, you can put the RoleProvider above those children who need the role value. And use const { role } = useRoleContext() in those children. Since role is stored in a state. Whenever you update the role by the following code, those children who use const { role } = useRoleContext() will be rerendered.
const { setRole } = useRoleContext();
// Please put it in a useEffect or handler function
// Or this will cause "Too many rerenders"
setRole('Some Role You Want')