/TypeScript/React protected routes typescript

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

Source: stackoverflow.com

Similar codes

0 vote132 views1 answer
Firebase angular assets not showing
TypeScript
1 vote118 views1 answer
Angular typescript set meta data
TypeScript
49 votes165 views5 answers
How to remove bullets from ul
TypeScript
14 votes131 views4 answers
Filter max value from array typescript
TypeScript
0 vote129 views1 answer
Chakra ui menu open on hover
TypeScript
0 vote142 views1 answer
Can check constraints reference other tables
TypeScript
0 vote118 views1 answer
Check if drive exists c#
TypeScript
5 votes140 views3 answers
Typescript check type of variable
TypeScript
1 vote136 views1 answer
Psycopg2 OperationalError: FATAL: unsupported frontend protocol 1234.5679: server supports 2.0 to 3.0
TypeScript
0 vote134 views1 answer
Distributed Cron Job
TypeScript