how to create react router in typescript for private and public page code example
Example 1: react router dom private route typescript
import React from "react";
import { Route, Redirect } from "react-router-dom";
const PrivateRoute: React.FC<{
component: React.FC;
path: string;
exact: boolean;
}> = (props) => {
const condition = performValidationHere();
return condition ? (<Route path={props.path} exact={props.exact} component={props.component} />) :
(<Redirect to="/page/login" />);
};
export default PrivateRoute;
Example 2: react router dom private route typescript
import * as React from "react";
import { Route } from "react-router-dom";
interface IProps {
exact?: boolean;
path: string;
component: React.ComponentType<any>;
}
const LoggedOutRoute = ({
component: Component,
...otherProps
}: IProps) => (
<>
<header>Logged Out Header</header>
<Route
render={otherProps => (
<>
<Component {...otherProps} />
</>
)}
/>
<footer>Logged Out Footer</footer>
</>
);
export default LoggedOutRoute;