INU Login Sign up
Login Or Sign up

Answers for "protected route react"

Javascript
1

react protected routes typescript

import * as React from 'react';
import {
    Route, 
    Redirect,
    RouteProps,
    RouteComponentProps
} from "react-router-dom";

interface PrivateRouteProps extends RouteProps {
    isAuthenticated: boolean;
  // Would reccommend this comes from a global state manager
  // such as redux, shown using basic props here
}

export class PrivateRoute extends Route<PrivateRouteProps> {
    render() {
        return (
            <Route render={(props: RouteComponentProps) => {
                if(!this.props.isAuthenticated) {
                    return <Redirect to='/login' />
                } 

                if(this.props.component) {
                    return React.createElement(this.props.component);
                } 

                if(this.props.render) {
                    return this.props.render(props);
                }
            }} />
        );
    }
}

// How To Use Them :::::
<PrivateRoute 
    path='/dashboard'
    component={DashboardPage} 
    isAuthenticated={props.isAuthenticated}
/>
      // OR
<PrivateRoute 
    path='/checkout'
    isAuthenticated={props.isAuthenticated}
    render={() => (
       <CheckoutPage auth={props.auth} />
    )} 
/>
Posted by: Guest on January-28-2020
0

protected routes in react js

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

function ProtectedRoute({ component: Component, ...restOfProps }) {
  const isAuthenticated = localStorage.getItem("isAuthenticated");
  console.log("this", isAuthenticated);

  return (
    <Route
      {...restOfProps}
      render={(props) =>
        isAuthenticated ? <Component {...props} /> : <Redirect to="/signin" />
      }
    />
  );
}

export default ProtectedRoute;
Posted by: Guest on September-08-2021
0

protected routes react js

//create a file for example privateRoute.js
import React, { Component } from "react";
import { Route, Redirect } from "react-router-dom";
import { isAuthenticated } from "./index";

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={(props) =>
      isAuthenticated() ? (
        <Component {...props} />
      ) : (
        <Redirect
          to={{ pathname: "/signin", state: { from: props.location } }}
        />
      )
    }
  />
);

export default PrivateRoute;



//now import it to your routes file and use it

import React from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import PrivateRoute from "./auth/privateRoute"

import SignUp from "./user/signUp";
import SignIn from "./user/signIn";
import Home from "./core/home";
import Dashboard from "./user/userDashboard";

const Routes = () => {
  return (
    <BrowserRouter>
    <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/signin" exact component={SignIn} />
        <Route path="/signup" exact component={SignUp} />
        <PrivateRoute path="/dashboard" exact component={Dashboard} />
      </Switch>
    </BrowserRouter>
  );
};
export default Routes;
Posted by: Guest on October-25-2021

Code answers related to "protected route react"

Code answers related to "Javascript"

Browse Popular Code Answers by Language

Python
Javascript
Whatever
Shell/Bash
CSS
Html
PHP
SQL
Java
C#

Popular Programming Languages

Abap ActionScript Assembly BASIC C C# C++ Clojure Cobol CSS Dart Delphi Elixir Erlang F# Fortran Go Groovy Haskell Html Java Javascript Julia Kotlin Lisp Lua Matlab Objective-C Pascal Perl PHP Prolog Python R Ruby Rust Scala Scheme Shell/Bash SQL Swift TypeScript VBA Whatever

Advertisements

290x500

Company

Compilers

Help

Connect with us

footer logo

Copyright © 2021 Codeinu