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

react protected route

Add Answer

Fierce Fly answered on May 7, 2022 Popularity 10/10 Helpfulness 3/10

answer react protected route

related protected route in react js

related react protected route

related create-react-app react routing protected routes

related react protected route

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 protected

Link to this answer
Share Copy Link

Contributed on May 07 2022

Fierce Fly

0 Answers Avg Quality 2/10

Closely Related Answers

protected route in react js

Comment

// create a file (e.g privateRoute.js) write this code

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

const useAuth = () => {
  const user = { loggedIn: localStorage.getItem("tokenId") };
  return user && user.loggedIn;
};

const ProtectedRoutes = () => {
  const isAuth = useAuth();
  return isAuth ? <Outlet /> : <Navigate to="/" />;
};

export default ProtectedRoutes;

// then app.js should look this way

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import other components that you need...

<BrowserRouter>
      <Routes>
        <Route path="*" element={<NotFoundPage />} />
        <Route path="/" element={<LoginPage />} />
        <Route element={<ProtectedRoutes />}>
          <Route path="/user-list" element={<UserListPage />} />
          <Route path="/add-user" element={<AddUserPage />} />
          <Route path="/user-details/:id" element={<UserDetailsPage />} />
          <Route path="/update-user/:id" element={<UpdateUserPage />} />
        </Route>
      </Routes>
</BrowserRouter>

Popularity 10/10 Helpfulness 5/10 Language javascript

Source: stackoverflow.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Dec 29 2022

Distinct Dove

0 Answers Avg Quality 2/10

protected route in react js

Comment

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>

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on May 24 2022

Abhishek

0 Answers Avg Quality 2/10

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

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 crea

Link to this answer
Share Copy Link

Contributed on Sep 12 2022

Roookas

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

react protected route

Contents

More Related Answers

react protected route

Closely Related Answers

protected route in react js

protected route in react js

react protected route

create-react-app react routing protected routes

react protected route

Grepper

Documentation

Social

Legal

Contact

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