protected routes in react js

Solutions on MaxInterview for protected routes in react js by the best coders in the world

Search
showing results for - "protected routes in react js"
Luca
07 Jan 2017
1Private Route--------
2
3import { Navigate,useLocation} from "react-router-dom"
4function Protecte({auth, children }) {   
5    return auth ? children : <Navigate to="/login" />;
6   
7}
8export default Protecte
9-----------------------------------
10
11App.js---
12<Route path="/admin" element={
13            <Protecte auth={isLoggedIn}>
14              <Admin />
15            </Protecte>
16    }
17   />
source
Prune
27 Sep 2017
1import React from "react";
2import { Redirect, Route } from "react-router-dom";
3
4function ProtectedRoute({ component: Component, ...restOfProps }) {
5  const isAuthenticated = localStorage.getItem("isAuthenticated");
6  console.log("this", isAuthenticated);
7
8  return (
9    <Route
10      {...restOfProps}
11      render={(props) =>
12        isAuthenticated ? <Component {...props} /> : <Redirect to="/signin" />
13      }
14    />
15  );
16}
17
18export default ProtectedRoute;
19
20
source
Lina
23 Jan 2017
1//create a file for example privateRoute.js
2import React, { Component } from "react";
3import { Route, Redirect } from "react-router-dom";
4import { isAuthenticated } from "./index";
5
6const PrivateRoute = ({ component: Component, ...rest }) => (
7  <Route
8    {...rest}
9    render={(props) =>
10      isAuthenticated() ? (
11        <Component {...props} />
12      ) : (
13        <Redirect
14          to={{ pathname: "/signin", state: { from: props.location } }}
15        />
16      )
17    }
18  />
19);
20
21export default PrivateRoute;
22
23
24
25//now import it to your routes file and use it
26
27import React from "react";
28import { BrowserRouter, Switch, Route } from "react-router-dom";
29import PrivateRoute from "./auth/privateRoute"
30
31import SignUp from "./user/signUp";
32import SignIn from "./user/signIn";
33import Home from "./core/home";
34import Dashboard from "./user/userDashboard";
35
36const Routes = () => {
37  return (
38    <BrowserRouter>
39    <Switch>
40        <Route path="/" exact component={Home} />
41        <Route path="/signin" exact component={SignIn} />
42        <Route path="/signup" exact component={SignUp} />
43        <PrivateRoute path="/dashboard" exact component={Dashboard} />
44      </Switch>
45    </BrowserRouter>
46  );
47};
48export default Routes;
49
similar questions
react router config private routesreact router change route from functionreact get route pathprivate routes in reacthow to do routes react jsreact js router parametersroute guards in reactadmin routes react jshow to use routes in react jsvue protected routerprivate route in react jshow to pass a prop in routereact router dynamic routesprivate route in next jsrendering component in route with propertiesreact router path array
queries leading to this page
protected route in react router domwhat is protected route react 3fwhat is protected route reactin react how to protected routes with msalprotected router code reactprotected routes and authentication with reacthow to make protected route in reactreact router dom protected routesprotected routes reactprotected route in reactprivate 26 protected routes in react use routes add private routereact protected routeslearn private and protected routes in react router domreact router protected route tsprivate routesprotected routes reactjsreactjs protected routeswhat are protected routes in reactcreate protected routes reacprotected route react jsprotected routes in react js with backendhow to make some routes privatehow to use protected route in reactprotected route reacteasy way to make routes privateprotected routes in react router dom v6protected routes in react js userouteprotected routes reacyreact js protected routesprotected routes react jsreact router protected routerphow to make routes privateprotected routes react js with api examplereact protected routeroute protected in reactjsprivate route with userreact router protected routesprotected routes in react jsprotected route in react jshow to make protected routes in reactprotected route react router tsreact router protected routeprotected routes and authentication with react routerhow to use protected routes in reactprotected routes in react using react routerprotected routes react routerprotected routes in reactreact router protected routeprotected routes using react router dom v6react router 6 protected routesreact js protected routehow to create protected route in reactnew react router create protected routeprotected route reactjsget current route in react router dom in protected routesreact protected routes npmprotected route react routerprotected routes in react router domprotected route react router domreact router protected routesreactjs protected route render propsprotected routing in reactprotected routes in react js