“ruta protegida en React JS” Código de respuesta

ruta protegida en React JS

import React from 'react'
import { Redirect, Route } from 'react-router-dom'

const Protected = ({ component, ...rest }) => {
	<Route
		{...rest}
		render={() => {
			localStorage.getItem('login') ? (
				<component {...props} />
			) : (
				<Redirect to='/login' />
			)
		}}
	/>
};
export default Protected


// app.js 
import Protected from'./components/Protected'

<Router>
<Protected exact path="/"component={Home}/>
<Protected exact path="/about"component={About}/>
<Protected exact path="/contact"component={Contact}/>
</Router>
Abhishek

Reaccionar ruta protegida

import { Navigate, Outlet } from 'react-router-dom';

const PrivateRoutes = () => {
  const location = useLocation();
  const { authLogin } = useContext(globalC);
  console.log("authLogin", authLogin);

  return authLogin 
    ? <Outlet />
    : <Navigate to="/login" replace state={{ from: location }} />;
}
Fierce Fly

Reaccionar ruta protegida

<BrowserRouter>
  <Routes>
    <Route path="/" element={<PrivateRoutes />} >
      <Route path="/dashboard" element={<Dashboard />} />
      <Route path="/about" element={<About />} />
    </Route>
    <Route path="/login" element={<Login />} />
    <Route path="*" element={<PageNotFound />} />
  </Routes>
</BrowserRouter>
Fierce Fly

Respuestas similares a “ruta protegida en React JS”

Preguntas similares a “ruta protegida en React JS”

Más respuestas relacionadas con “ruta protegida en React JS” en JavaScript

Explore las respuestas de código populares por idioma

Explorar otros lenguajes de código