react protected routes typescript
/*SM*/
/*example implemented with and FC and Typescript*/
import { Redirect, Route, RouteProps } from 'react-router';
export type ProtectedRouteProps = {
isAuthenticated: boolean;
authenticationPath: string;
} & RouteProps;
export default function ProtectedRoute({isAuthenticated, authenticationPath, ...routeProps}: ProtectedRouteProps) {
if(isAuthenticated) {
return <Route {...routeProps} />;
} else {
return <Redirect to={{ pathname: authenticationPath }} />;
}
};
0
0
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} />
)}
/>
Thank you!
0
0
0
Are there any code examples left?
New code examples in category TypeScript
Relative searches
creating protected route typescript
react router protected route typescript
protected routes typescript
protected route react-router-dom typescript
protected route react-router typescript
how to protected a route in react router with typescript
typescript react route protected route
protected route component react typescript
react router dom protected route typescript
react typescript protected route
protected routes in react js typescript
protected route react typescript
typescript protected route
react router dom protected routes typescript
protected routes react typescript
react protected routes
protected route react in typescript
protected route react hooks and context
protected route react
react protected routes typescript
