react-router-dom#RouteProps TypeScript Examples

PrivateRoute = ({ children, ...rest }: RouteProps) => {
  const { loggedIn } = useAuth();

  return (
    <Route
      {...rest}
      render={({ location }) =>
        loggedIn ? (
          children
        ) : (
          <Redirect
            to={{
              pathname: '/',
              state: { from: location },
            }}
          />
        )
      }
    />
  );
}

routes: RouteProps[] = [
  {
    exact: true,
    path: '/',
    component: Home,
  },
  {
    exact: true,
    path: '/wallet',
    component: Wallet,
  },
  {
    exact: true,
    path: '/account/:account',
    component: Extrinsic,
  },
  {
    exact: true,
    path: '*',
    component: Home,
  },
]

routes: Array<RouteProps> = [
  {
    path: "/apps/:id/environments",
    exact: true,
    component: Async(() => import("~/pages/apps/[id]/environments")),
  },
  {
    path: "/apps/:id/environments/:envId",
    component: Async(
      () =>
        import("~/pages/apps/[id]/environments/[env-id]/Environment.context")
    ),
  },
]

PublicRoute: React.FC<RouteProps> = ({ children, ...rest }) => {
  const location = useLocation()
  const signedIn = useAuthenticated()

  if (!signedIn) return <div>{children}</div>

  return (
    <Navigate
      replace
      to={{
        pathname: '/'
      }}
      state={{ from: location }}
    />
  )
}

PrivateRoute: React.FC<RouteProps> = ({ children, ...rest }) => {
  const signedIn = useAuthenticated()
  const tableInfoReady = useIsTableInfoReady()
  const location = useLocation()

  // return (
  //   <Route
  //     {...rest}
  //     children={({ location }) => {
  //       // user is logged-in
  if (signedIn === null) {
    return <Loading backdrop content="loading authentication status..." />
  }
  if (signedIn && !tableInfoReady) {
    return <Loading backdrop content="loading tables information..." />
  }
  if (!signedIn) {
    return (
      <Navigate
        replace
        to={{
          pathname: '/login'
        }}
        state={{ from: location }}
      />
    )
  }
  return <div>{children}</div>
  //       return children
  //     }}
  //   />
  // )
}

routes: RouteProps[] = [
    {
        path: '/',
        component: Home,
        exact: true,
    },
    {
        path: '/Hooks',
        component: Hooks,
    },
    {
        path: '/Standard',
        component: Standard,
    },
    {
        path: '/UseFactory',
        component: UseFactory,
    },
    {
        path: '/DontUseRedux',
        component: DontUseRedux,
    },
    {
        path: '/UseSaga',
        component: UseSaga,
    },
]

ProtectedRoute: React.FC<RouteProps> = ({ component: Component }, ...rest) => {
  const auth0Context = React.useContext(Auth0Context);
  const isAuthenticated = auth0Context?.state.matches("authenticated") ?? false;

  return (
    <Route
      {...rest}
      render={(props) => {
        if (isAuthenticated && Component) return <Component {...rest} {...props} />;
        auth0Context?.send("LOGIN");
      }}
    />
  );
}

/* istanbul ignore next */
function UserOnlyRoute({
  children,
  userIsLogged,
  ...rest
}: { children: JSX.Element | JSX.Element[]; userIsLogged: boolean } & RouteProps) {
  return (
    <Route {...rest}>
      {children}
      {!userIsLogged && <Redirect to='/' />}
    </Route>
  );
}

AuthWrapperComponent: React.FunctionComponent<RouteProps> = (
  props
) => {
  const { userInfo } = React.useContext(AuthContext);
  const navigate = useNavigate();

  React.useEffect(() => {
    if (!userInfo) {
      navigate("/");
    }
  }, [props.path]);

  return <>{props.children}</>;
}

AuthRouterComponent: React.FC<RouteProps> = props => {
  const { isAuthenticated } = React.useContext(AuthContext);
  const { onRedirect } = useAuthRedirect();

  React.useEffect(() => {
    if (!isAuthenticated) {
      onRedirect();
    }
  }, [props.location.pathname]);

  return <Route {...props} />;
}

/* istanbul ignore next */
function GuestOnlyRoute({
  children,
  userIsLogged,
  ...rest
}: { children: JSX.Element | JSX.Element[]; userIsLogged: boolean } & RouteProps) {
  return (
    <Route {...rest}>
      {children}
      {userIsLogged && <Redirect to='/' />}
    </Route>
  );
}

PAGE_HELP: Array<{
  file: string
  matcher: string | RouteProps | string[]
}> = [
  {
    file: '/help/DevicesPage.md',
    matcher: {
      path: '/devices',
      exact: true,
    },
  },
  {
    file: '/help/VirtualDevicePage.md',
    matcher: '/devices/virtual_device',
  },
  {
    file: '/help/DevicePage.md',
    matcher: '/devices/:device',
  },
  {
    file: '/help/DashboardPage.md',
    matcher: '/dashboard/:device',
  },
  {
    file: '/help/RealtimePage.md',
    matcher: '/realtime/:device',
  },
]

PrivateRoute: FC<IPrivateRoute & RouteProps> = ({
  isLoggedIn,
  ...rest
}) => {
  return isLoggedIn ? <Route {...rest} /> : <Redirect to="/login" />;
}

PrivateRoute: React.FC<RouteProps> = props => {
  const logged = useSelector((state: AppState) => state.user.account.verified);

  return logged ? <Route {...props} /> : <Login />;
}

DAORoute: React.FC<RouteProps> = ({ children, ...props }) => {
  return (
    <Route {...props}>
      <DAORouteContent>{children}</DAORouteContent>
    </Route>
  );
}

getComponent =
  <C extends {}>(Component: React.FC<C>, additionalProps: C) =>
  (currentProps: RouteProps) =>
    <Component {...additionalProps} {...currentProps} />

PrivateRoute: React.FC<RouteProps> = (props: RouteProps) => {
  const { getCurrentAccount } = useRecoilValue(currentAccountState)
  return getCurrentAccount()?.accessToken
    ? <Route {...props} />
    : <Route {...props} component={() => <Redirect to="/login" />} />
}

AppRoute = (props: RouteProps) => (
  <Route {...props}>
    <Wrapper>{props.children}</Wrapper>
  </Route>
)

menus: (RouteProps & { title: string })[] = [
  { path: '/connectivity', title: 'Connectivity', children: <ConnectivityPage rootPath='/connectivity' /> },
  { path: '/webhook', title: 'Webhook', component: WebhookComponent },
  { path: '/slack', title: 'Slack', component: SlackComponent },
  { path: '/emails', title: 'Email', component: EmailComponent },
  { path: '/sms', title: 'SMS', component: SMSComponent },
  { path: '/audits', title: 'Audits Example', component: AuditsExample },
]

routes: Array<RouteProps> = [
  {
    path: "/apps/:id",
    exact: true,
    component: Async(() => import("~/pages/apps/[id]")),
  },
  {
    path: "/apps/:id/environments",
    component: Async(
      () => import("~/pages/apps/[id]/environments/Environments.context")
    ),
  },
  {
    path: "/apps/:id/deployments",
    exact: true,
    component: Async(() => import("~/pages/apps/[id]/deployments")),
  },
  {
    path: "/apps/:id/deployments/:deploymentId",
    exact: true,
    component: Async(
      () => import("~/pages/apps/[id]/deployments/[deployment-id]")
    ),
  },
  {
    path: "/apps/:id/team",
    exact: true,
    component: Async(() => import("~/pages/apps/[id]/team")),
  },
  {
    path: "/apps/:id/settings",
    exact: true,
    component: Async(() => import("~/pages/apps/[id]/settings")),
  },
  {
    path: "/apps/:id/usage",
    exact: true,
    component: Async(() => import("~/pages/apps/[id]/usage")),
  },
]

routes: Array<RouteProps> = [
  {
    path: "/",
    exact: true,
    component: Async(() => import("~/pages/apps")),
  },
  {
    path: "/auth",
    component: Async(() => import("~/pages/auth")),
  },
  {
    path: "/logout",
    component: Async(() => import("~/pages/logout")),
  },
  {
    path: "/apps/new",
    exact: true,
    component: Async(() => import("~/pages/apps/new")),
  },
  {
    path: "/apps/new/:provider",
    exact: true,
    component: Async(() => import("~/pages/apps/new/[provider]")),
  },
  {
    path: "/app/invitation/accept",
    component: Async(() => import("~/pages/app/invitation/Accept")),
  },
  {
    path: "/app/:id",
    component: (): React.ReactElement => {
      const { pathname } = useLocation();
      return <Redirect to={pathname.replace("/app", "/apps")} />;
    },
  },
  {
    path: "/apps/:id",
    component: Async(() => import("~/pages/apps/App.context")),
  },
  {
    path: "/user",
    component: Async(() => import("~/pages/user")),
  },
]

routes: Array<RouteProps> = [
  {
    path: "/user/account",
    exact: true,
    component: Async(() => import("~/pages/user/account")),
  },
]

/**
 * ```jsx
 * export class MyApp extends Component {
 *   render() {
 *     return <Router>
 *       <Switch>
 *         <Route path='public-path'/>
 *         <ProtectedRoute path='authenticated-path'/>
 *       </Switch>
 *     </Router>
 *   }
 * }
 * ```
 *
 * they will be redirect child components to be displayed if the user is not authenticated
 * the client will be redirected to the login page and returned to the page they we're
 * redirected from after login
 */
export class ProtectedRoute extends React.Component<RouteProps> {
  render() {
    const { component, render, children, ...routeProps } = this.props;
    if (children != null) {
      return (
        <Route {...routeProps}>
          <ProtectedComponent>{children}</ProtectedComponent>
        </Route>
      );
    }
    if (render != null) {
      return <Route {...routeProps} render={(props) => <ProtectedComponent>{render(props)}</ProtectedComponent>} />;
    }
    if (component != null) {
      return (
        <Route
          {...routeProps}
          render={(props) => (
            <ProtectedComponent>{React.createElement(component as any, props as any)}</ProtectedComponent>
          )}
        />
      );
    }
    return <Route {...routeProps} />;
  }
}

App = () => {
  useMigration();
  const [finishedTutorial, setFinishedTutorial] = useLocalStorage(
    "finished_tutorial",
    false
  );
  const [confirmPageIcon, setConfirmPageIcon] = useLocalStorage<string | null>(
    "confirmPageIcon",
    null
  );
  const { lockStore, unlocked, isEncrypted } = useData();

  const { pathname } = useLocation();
  const browserHistory = useHistory();

  const handleBlur = useCallback(() => {
    if (pathname !== "/qrReader" && pathname !== "/cameraSetting") lockStore();
  }, [lockStore, pathname]);

  useEffect(() => {
    window.addEventListener("blur", handleBlur);
    return () => {
      window.removeEventListener("blur", handleBlur);
    };
  }, [handleBlur]);

  const pageMap = useMemo<
    { route: RouteProps; component: React.ReactNode; privateRoute: boolean }[]
  >(
    () => [
      {
        privateRoute: false,
        route: { exact: true, path: "/tutorial" },
        component: <Tutorial setFinishedTutorial={setFinishedTutorial} />,
      },
      {
        privateRoute: false,
        route: { exact: true, path: "/login" },
        component: <Login />,
      },
      {
        privateRoute: true,
        route: {
          exact: true,
          path: "/",
        },
        component: <MainScreen />,
      },
      {
        privateRoute: true,
        route: {
          exact: true,
          path: "/confirm/:id",
        },
        component: <Confirm confirmPageIcon={confirmPageIcon} />,
      },
      {
        privateRoute: true,
        route: {
          exact: true,
          path: "/qrGenerator",
        },
        component: <QRGenerator />,
      },
      {
        privateRoute: true,
        route: {
          exact: true,
          path: "/disclaimer",
        },
        component: <Disclaimer />,
      },
      {
        privateRoute: true,
        route: {
          exact: true,
          path: "/qrReader",
        },
        component: <QRReader />,
      },
      {
        privateRoute: true,
        route: {
          exact: true,
          path: "/cameraSetting",
        },
        component: <CameraSetting />,
      },
      {
        privateRoute: true,
        route: {
          exact: true,
          path: "/confirmPageSetting",
        },
        component: (
          <ConfirmPageSetting
            confirmPageIcon={confirmPageIcon}
            setConfirmPageIcon={setConfirmPageIcon}
          />
        ),
      },
      {
        privateRoute: true,
        route: {
          exact: true,
          path: "/vaccinationQRReader",
        },
        component: <VaccinationQRReader />,
      },
    ],
    [confirmPageIcon, setConfirmPageIcon, setFinishedTutorial]
  );

  // transition group cannot use switch component, thus need manual redirect handling
  // ref: https://reactcommunity.org/react-transition-group/with-react-router
  useEffect(() => {
    if (!unlocked && pathname !== "/login") {
      browserHistory.replace("/login");
    }
    if (unlocked && pathname === "/login") {
      browserHistory.replace("/");
    }
  }, [isEncrypted, unlocked, browserHistory, pathname]);

  useEffect(() => {
    if (!finishedTutorial && pathname !== "/tutorial") {
      browserHistory.replace("/tutorial");
    }
    if (finishedTutorial && pathname === "/tutorial") {
      browserHistory.replace("/");
    }
  }, [finishedTutorial, browserHistory, pathname]);

  useEffect(() => {
    const hasMatch = any(({ route }) => {
      if (!route.path) return false;
      return !isNil(matchPath(pathname, route));
    }, pageMap);

    if (!hasMatch) {
      browserHistory.replace("/");
    }
  }, [browserHistory, pathname, pageMap]);

  return (
    <>
      <GlobalStyle />
      {pageMap.map(({ route, component, privateRoute }) =>
        privateRoute && !unlocked ? (
          <React.Fragment key={String(route.path)} />
        ) : (
          <Route {...route} key={String(route.path)}>
            {({ match }) => (
              <CSSTransition
                in={match != null}
                timeout={300}
                classNames="page"
                unmountOnExit
              >
                <div className="page">
                  <Suspense fallback={<PageLoading />}>{component}</Suspense>
                </div>
              </CSSTransition>
            )}
          </Route>
        )
      )}
    </>
  );
}