CodeSnips

typescript

import { Navigate, useLocation } from 'react-router-dom'
import { useAuth } from '@/contexts/AuthContext'

interface ProtectedRouteProps {
  children: React.ReactNode
}

React Router with protected routes

react react-router routing

by Maya Patel 2 tabs

javascript

import { createContext, useContext, useEffect, useMemo, useState } from 'react';
import { fetchCurrentUser, postLogin, postLogout } from './api';

const AuthContext = createContext(null);

export function AuthProvider({ children }) {

Protecting React Routes with an Auth Context and a RequireAuth Wrapper

react react-router authentication

by codesnips 4 tabs

typescript

import { Link, useLocation, useMatches } from 'react-router-dom'

interface BreadcrumbMatch {
  pathname: string
  handle?: {
    crumb?: (data?: any) => string

Breadcrumb navigation from React Router

react react-router navigation

by Maya Patel 2 tabs