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

create-react-app react routing protected routes

Roookas answered on May 7, 2022 Popularity 9/10 Helpfulness 2/10

answer create-react-app react routing protected routes

related react protected route

create-react-app react routing protected routes

Comment

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

const PrivateRoutes = () => {
    let auth = localStorage.token
    if (!auth){
       return(<Navigate to="/login"/>) 
    }else {
        return(<Outlet/>)
    }

}

export default PrivateRoutes

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: thinkpanda.hashnode.dev

Tags: create-react-app javascript protected react-routing routes

Link to this answer
Share Copy Link

Contributed on Sep 12 2022

Roookas

0 Answers Avg Quality 2/10

Closely Related Answers

react protected route

Comment

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 }} />;
}

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: stackoverflow.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on May 07 2022

Fierce Fly

0 Answers Avg Quality 2/10

react protected route

Comment

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

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: stackoverflow.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on May 07 2022

Fierce Fly

0 Answers Avg Quality 2/10

react protected route

Comment

-1

import { Switch, Route, Redirect } from "react-router-dom";

function App() {
  return (
    <Switch>
      <Route path="/public">
        <PublicPage />
      </Route>
      <Route
        path="/protected"
        render={() => (
          <RequireAuth redirectTo="/login">
            <ProtectedPage />
          </RequireAuth>
        )}
      />
    </Switch>
  );
}

function RequireAuth({ children, redirectTo }) {
  let isAuthenticated = getAuth();
  return isAuthenticated ? children : <Redirect to={redirectTo}>;
}

Popularity 9/10 Helpfulness 1/10 Language javascript

Source: gist.github.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jan 01 2023

Plain Pig

0 Answers Avg Quality 2/10

create-react-app react routing protected routes

Contents

More Related Answers

create-react-app react routing protected routes

Closely Related Answers

react protected route

react protected route

react protected route

Grepper

Documentation

Social

Legal

Contact

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