I am implementing a fake authentication system in React router that re-directs the user to the login page with route “/login” when the user is not logged in. The function is in utils.js and I am exporting it to my App.js file where the routes are defined.
The function in utils.js is very basic and looks like this
import { redirect } from "react-router-dom"
export async function requireAuth() {
const isLoggedIn = false
if(!isLoggedIn) throw redirect("/login")
}
Then I am importing and providing the function call directly in my loader prop in App.js, like this
import React from 'react';
import {
Route,
RouterProvider,
createBrowserRouter,
createRoutesFromElements,
} from 'react-router-dom';
import './server.js';
import './App.css';
import Home from './pages/Vans/Home';
import About from './pages/Vans/About';
import Vans, { loader as vansLoader } from './pages/Vans/Vans';
import Login from './pages/Auth/Login.jsx';
import VanDetail, { loader as vanLoader } from './pages/Vans/VanDetail';
import Layout from './components/Layout';
import HostLayout from './components/HostLayout';
import Dashboard from "./pages/Host/Dashboard";
import Income from './pages/Host/Income';
import HostVans, { loader as hostVansLoader } from "./pages/Host/HostVans";
import HostVanDetail, { loader as hostVanLoader } from './pages/Host/HostVanDetail';
import HostVanInfo from './components/HostVanInfo.jsx';
import Reviews from './pages/Host/Reviews';
import HostVanPrice from './components/HostVanPrice.jsx';
import HostVanPhotos from './components/HostVanPhotos.jsx';
import NotFound from './components/NotFound.jsx';
import Error from './components/Error.jsx';
import { requireAuth } from './utils.js';
const router = createBrowserRouter(createRoutesFromElements(
<Route path="/" element={<Layout />} errorElement={<Error />}>
<Route index element={<Home />} />
<Route path="about" element={<About />} />
<Route
path="login"
element={<Login />}
/>
<Route
path="vans"
element={<Vans />}
loader={vansLoader}
/>
<Route
path="vans/:id"
element={<VanDetail />}
loader={vanLoader}
/>
<Route path="host" element={<HostLayout />}>
<Route
index
element={<Dashboard />}
loader={async () => await requireAuth()}
/>
<Route
path="income"
element={<Income />}
loader={async () => await requireAuth()}
/>
<Route
path="reviews"
element={<Reviews />}
loader={async () => await requireAuth()}
/>
<Route
path="vans"
element={<HostVans />}
loader={hostVansLoader}
/>
<Route
path="vans/:id"
element={<HostVanDetail />}
loader={hostVanLoader}
>
<Route
index
element={<HostVanInfo />}
loader={async () => await requireAuth()}
/>
<Route
path="pricing"
element={<HostVanPrice />}
loader={async () => await requireAuth()}
/>
<Route
path="photos"
element={<HostVanPhotos />}
loader={async () => await requireAuth()}
/>
</Route>
</Route>
<Route path="*" element={<NotFound />} />
</Route>
))
function App() {
return (
<div className="App">
<RouterProvider router={router} />
</div>
);
}
export default App;
I was expecting the React router to route to the /login page when I try to go to /host route it renders a blank page to the screen. I checked the Network tab in dev-tools and its not fetching the login page document but rather the same host document with HTTP code 304. Can somebody help me fix this issue?