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

protected route in react js

Add Answer

Distinct Dove answered on May 7, 2022 Popularity 10/10 Helpfulness 6/10

answer protected route in react js

related protected routes react router dom v6

related protected route in react js

related react protected route

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 6/10 Language javascript

Source: stackoverflow.com

Tags: javascript protected

Link to this answer
Share Copy Link

Contributed on Dec 29 2022

Distinct Dove

0 Answers Avg Quality 2/10

Closely Related Answers

protected routes react router dom v6

Comment

//Create Privateroutes.jsx
import { Navigate, Outlet } from 'react-router-dom'
const PrivateRoutes = () => {
  let auth = {'token':true}
return (
    auth.token ? <Outlet/> : <Navigate to='/login'/>
  )
}

import { BrowserRouter as Router, Routes, Route} from 'react-router-dom'
import PrivateRoutes from './auth/PrivateRoutes';
.
.
.

...
function App() {
  return (
    <Router>
        <Routes>
          <Route element={<PrivateRoutes/>}>
  			  //All routes inside this route are protected
              <Route path='/' element={<Users/>} />
              <Route path='/products' element={<Products/>} />
          </Route>
          <Route path='/login' element={<Login/>}/>
        </Routes>
    </Router>
  );
}

Popularity 9/10 Helpfulness 5/10 Language javascript

Source: www.youtube.com

Tags: dom

Link to this answer
Share Copy Link

Contributed on Aug 22 2023

Live Tembiso

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

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

protected route in react js

Contents

More Related Answers

protected route in react js

Closely Related Answers

protected routes react router dom v6

protected route in react js

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.