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

protected routing

Add Answer

30_Savaliya Denish answered on March 8, 2022 Popularity 9/10 Helpfulness 3/10

answer protected routing

related protected route

related Protected-Routes

protected routing

Comment

  //app.js main
  return (
    <>
      <Routes>
        <Route
          path="/login"
          element={<Login setUser={() => setUser(null)} />}
        />
        <Route
          path="/signup"
          element={<RegistrationPage setUser={() => setUser(true)} />}
        />
        <Route path="/forgotpassword" element={<ResetPassword />} />
        <Route path="/verifyotp" element={<VerifyOTP />} />
        <Route path="/newpassword" element={<ResetNewPassword />} />

        <Route path="/" element={<ProtectedRoutes isLogged={user} />}>
          <Route path="/dasboard" element={<Dashboard />} />
          <Route path="/campaigns" element={<Campaigns />} />
          <Route path="/smshistory" element={<SmsHistory />} />
          <Route path="/contact" element={<ContactList />} />
        </Route>

        <Route path="*" element={<ErrorPage />} />
      </Routes>
    </>
  );
  
  //protected routing code:
  import { Navigate, Outlet} from 'react-router-dom';
const ProtectedRoutes=({isLogged})=>{
    console.log("user Login",isLogged);
    return isLogged?<Outlet/>:<Navigate to="/signup"/>
}
export default ProtectedRoutes;

Popularity 9/10 Helpfulness 3/10 Language whatever

Source: Grepper

Tags: protected routing whatever

Link to this answer
Share Copy Link

Contributed on Mar 08 2022

30_Savaliya Denish

0 Answers Avg Quality 2/10

Closely Related Answers

protected route

Comment

 //PrivateRoute.js
 
 import { useSelector } from "react-redux";
 import { Navigate } from "react-router-dom";

function PrivateRoute({ children }) {
  const { user } = useSelector((state) => state.user);
  const token = localStorage.getItem("token");

  if (!token) {
    return <Navigate to="/login" replace />;
  }
  return children;
}
export default PrivateRoute;
 
 
 
 
 // App.js
 <Router>
      <AuthProvier>
        <Routes>
          <Route path="login" element={<Login />}></Route>
          <Route path="/dashboard" element={<PrivateRoute><Dashboard/></PrivateRoute>}>
            <Route path="user" element={<User />} />
            <Route path="system" element={<System />} />
            <Route path="customer" element={<Customer />} />
            <Route path="customer/:id" element={<CustomerDetail />} />
          </Route>
          <Route path="*" element={<Navigate to="/home" />}></Route>
        </Routes>
      </AuthProvier>
  </Router>

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Sep 03 2022

Shamim

0 Answers Avg Quality 2/10

Protected-Routes

Comment

import { Suspense, useState } from "react";
import { Routes, Route, Navigate } from "react-router-dom";

interface props {
  path: string;
  MatchComponent: string;
}

const ProtectedRoutes = ({ path, MatchComponent }: props) => {
  const [isLoggedIn] = useState(true);

  return (
    <>
      {isLoggedIn ? (
        <>
          <Routes>
            <Route
              path={path}
              element={
                <Suspense fallback={<h1>Loading...</h1>}>
                  <MatchComponent />
                </Suspense>
              }
            />
          </Routes>
        </>
      ) : (
        <Routes>
          <Route path="*" element={<Navigate to="/" replace />} />
        </Routes>
      )}
    </>
  );
};

export default ProtectedRoutes;

Popularity 9/10 Helpfulness 2/10 Language whatever

Source: Grepper

Tags: whatever whateve

Link to this answer
Share Copy Link

Contributed on Oct 28 2022

Leonhart

0 Answers Avg Quality 2/10

protected routing

Contents

More Related Answers

protected routing

Closely Related Answers

protected route

Protected-Routes

Grepper

Documentation

Social

Legal

Contact

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