“Enrutamiento privado en React” Código de respuesta

ruta privada en React JS

const PrivateRoute = ({component: Component, ...rest}) => {
  const {isAuthenticated} = rest;

  return (
    <Route {...rest} render={props => (
      isAuthenticated ? (
        <Component {...props}/>
      ) : (
        <Redirect to={{
          pathname: '/login',
          state: {from: props.location}
        }}/>
      )
    )}
    />
  );
};

PrivateRoute.propTypes = {
  isAuthenticated: PropTypes.bool.isRequired,
};

function mapStateToProps(state) {
  return {
    isAuthenticated: state.user.isAuthenticated,
  };
}

export default connect(mapStateToProps)(PrivateRoute);
Mystic Dev

Enrutamiento privado en React

import React, { useEffect, useState } from "react";
import "./App.css";
import { Routes, Route, Navigate } from "react-router-dom";
// import Home from "./components/Home";
 import Dashboard from "./components/Dashboard";
// import SignIn from "./components/SignIn";
// import PrivateRoute from "./components/PrivateRoute";
// import PublicRoute from "./components/PublicRoute";
import Auth from "./Pages/auth";
import Profile from "./Pages/profile";

const App3 = () => {

  const[auth,setAuth]=useState(null);

  useEffect(() => {
    let user = localStorage.getItem("user");
    user && JSON.parse(user) ? setAuth(true) : setAuth(false);
  }, []);

  useEffect(() => {
    localStorage.setItem("user", auth);
  }, [auth]);


  return (
  
      <Routes>
      {!auth && (
        <Route path="/auth" 
        element={<Auth authenticate={()=>setAuth(true)}/>}
        />   
      )}

        {auth && <>
          <Route path="/profile"
          element={<Profile logout={()=>setAuth(false)}/>} />
          <Route path="/dashboard" element={<Dashboard/>} />
        </>
        
        }
        <Route path="/dashboard" element={<Dashboard />}/>

          <Route path="*" element={<Navigate to={auth ? "/profile" : "/auth"} />} />

        {/* <PublicRoute restricted={false} element={<Home/>} path="/" exact /> 
        <PublicRoute restricted={true} element={<SignIn/>} path="/signin" exact />
        <PrivateRoute element={<Dashboard />} path="/dashboard" exact /> */}
      </Routes>

  );
};

export default App3;
30_Savaliya Denish

Respuestas similares a “Enrutamiento privado en React”

Preguntas similares a “Enrutamiento privado en React”

Más respuestas relacionadas con “Enrutamiento privado en React” en JavaScript

Explore las respuestas de código populares por idioma

Explorar otros lenguajes de código

Shell/Bash
C#
C++
C
CSS
HTML
Java
JavaScript
Objective-C
PHP
Python
Sql
Swift
Ruby
TypeScript
Go
Kotlin
Assembly
R
VBA
Scala
Rust
Dart
Elixir
Clojure
Haskell
Matlab
Erlang
Cobol
Fortran
Scheme
Perl
Groovy
Lua
Julia
Delphi
Abap
Lisp
Prolog
Pascal
ActionScript
Basic
Solidity
PowerShell
GDScript
Excel