1

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. introducir la descripción de la imagen aquí

3
  • Si pudieras pasar el código de la imagen, usando la opción {} ejemplo de código en la pregunta. Las preguntas con dicho formato son preferidas por la comunidad.
    – g.4
    Commented el 26 mar. 2022 a las 3:11
  • Deberías pasarte por Cómo preguntar y realizar el recorrido de bienvenida. Luego editar tu pregunta Commented el 26 mar. 2022 a las 17:02
  • Podrías crear un componente de tipo PrivateRoute que se encargue de dar el acceso a los perfiles o roles que corresponden.
    – vicasas
    Commented el 14 abr. 2022 a las 12:17

2 respuestas 2

1

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>
);
}
0

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.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.