tengo que redireccionar al home ("/") si el usuario "Admin" quiere ingresar a /contacto la pregunta es: cual es la mejor forma de hacerlo? yo lo hice con un useEffect que funciona, pero si hay una mejor forma de optimizarlo lo hago.
2 respuestas
Si estas usando la version 6 de React Router Dom esta forma tambien funciona:
import { useState } from "react";
export default function App() {
const [isAdmin, setIsAdmin] = useState(false);
return (
<HashRouter>
<Routes>
<Route path="/" element={<HomePage />} />
<Route
path="/contact"
element={!isAdmin ? <Navigate to="/" /> : <ContactPage />}
/>
</Routes>
</HashRouter>
);
}
Puede crear un componente personalizado PrivateRoute
que se encargue de otorgar acceso o denegar el mismo según se requiera.
/**
* Private Routes
*
* This is a higher order component (HOC) for all routes defined as privates
* in the application.
*/
import React from 'react'
import PropTypes from 'prop-types'
import { Route, Redirect } from 'react-router-dom'
const isLogin = () => true
export default function PrivateRoute({ component: Component, ...rest }) {
return (
// Shows the component only when the user is authenticated
// otherwise, redirect to the path/signin.
<Route
{...rest}
render={(props) =>
isLogin() ? <Component {...props} /> : <Redirect to='/signin' />
}
/>
)
}
PrivateRoute.propTypes = {
component: PropTypes.elementType.isRequired,
}
Usage
export default function Routes() {
return (
<Switch>
<PrivateRoute exact path='/dashboard' component={Dashboard} />
<Route component={NotFoundPage} />
</Switch>
)
}
Lo anterior es válido para v4 y v5 desconozco si habrá cambiado algo en v6.
{} ejemplo de código
en la pregunta. Las preguntas con dicho formato son preferidas por la comunidad.PrivateRoute
que se encargue de dar el acceso a los perfiles o roles que corresponden.