Breaking News: Grepper is joining You.com. Read the official announcement!

React Private Route

Add Answer

Rasel Hossain answered on January 8, 2021 Popularity 10/10 Helpfulness 4/10

answer React Private Route

related react router dom private route

related private route component react

related private route in react js

related private routing in react

React Private Route

Comment

Private Route--------

import { Navigate,useLocation} from "react-router-dom"
function Protecte({auth, children }) {   
    return auth ? children : <Navigate to="/login" />;
   
}
export default Protecte
-----------------------------------

App.js---
<Route path="/admin" element={
            <Protecte auth={isLoggedIn}>
              <Admin />
            </Protecte>
    }
   />

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: stackoverflow.com

Tags: javascript private protected react-router

Link to this answer
Share Copy Link

Contributed on Nov 15 2021

Rasel Hossain

0 Answers Avg Quality 2/10

Closely Related Answers

react router dom private route

Comment

//WORKS ON react-router-dom v6
//Using Outlet and Navigate
import { Routes, Route, Outlet, Navigate} from "react-router-dom";

function PrivateOutlet() {
  const auth = useAuth();
  return auth ? <Outlet /> : <Navigate to="/login" />;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/private-outlet" element={<PrivateOutlet />}>
          <Route element={<Private />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: dev.to

Tags: dom

Link to this answer
Share Copy Link

Contributed on Jul 13 2022

Sticky Pingu

0 Answers Avg Quality 2/10

private route component react

Comment

// ProtectedRoute.jsx
import React from "react";
import { Navigate, Outlet } from "react-router-dom";
const ProtectedRoute = ({ user, children, redirectPath = "/" }) => {
  if (!user) {
    return <Navigate to={redirectPath} replace />;
  }
  return children ? children : <Outlet />;
};
export default ProtectedRoute;

// use app.js
//...
<Route element={<ProtectedRoute user={user} />}>
	<Route path='/profile' element={<Profile />} />
	<Route path='/offers' element={<Offers />} />
</Route>
//...

Popularity 9/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Dec 26 2022

TA9I

0 Answers Avg Quality 2/10

private route in react js

Comments(1)

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

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: stackoverflow.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jan 08 2021

Mystic Dev

0 Answers Avg Quality 2/10

private routing in react

Comment

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;

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Mar 04 2022

30_Savaliya Denish

0 Answers Avg Quality 2/10

React Private Route

Contents

More Related Answers

React Private Route

Closely Related Answers

react router dom private route

private route component react

private route in react js

private routing in react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.