Estoy trabajando en la aplicación web que tiene una opción de rol cuando visitas por primera vez. Después de elegir el rol de administrador, por ejemplo, establece el valor de userRole en localStorage .
Aquí está la aplicación, puede ver que, según el rol actual, hay diferentes rutas.
Después de elegir el rol, se me redirige a la ruta '/' y en realidad quiero ver el componente que representa esta ruta, que es TableBoard en este caso, pero en su lugar, primero obtengo render={() => <Container>its from app.tsx {route.component}</Container>} . Entonces, en el primer render solo veo its from app.tsx , luego actualizo la página y todo está bien.
¿Cómo arreglar el enrutamiento aquí?
Por favor, pregunte si algo no está claro.
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;Componente que debe representarse para la ruta a la que me redirigen:
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> ); };Y el código de Components.tsx tiene este aspecto:
const Container: React.FC<ContainerProps> = ({children}) => { return ( <div> {children} </div> ); }; export default Container;Porque localStorage.getItem('role') no hará que la reacción vuelva a representar su componente. Puede hacer que un proveedor maneje esta situación.
Por ejemplo:
// 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> ) }; Luego, puede colocar RoleProvider sobre los elementos secundarios que necesitan el valor del rol. Y use const { role } = useRoleContext() en esos niños. Dado que el rol se almacena en un estado. Cada vez que actualice el rol con el siguiente código, se volverán a representar los elementos secundarios que usen const { role } = useRoleContext() .
const { setRole } = useRoleContext(); // Please put it in a useEffect or handler function // Or this will cause "Too many rerenders" setRole('Some Role You Want')