Trouble implementing loaders locally

React
1

I’m currently having issues implementing loaders on my local machine. I tried to replicate the protected routes from the react router course. I keep getting an error

image
image1920×892 30.1 KB
Is there any workaround ? Here is the code

import {
    createBrowserRouter,
    RouterProvider,
    createRoutesFromElements,
    Route
} from "react-router-dom"
import Layout from "./components/Layout"
import Home from "./pages/Home"
import HostLayout from "./pages/HostLayout"
import Dashboard from "./pages/Host/Dashboard"
import Income from "./pages/Host/Income"
import {
    default as HostVans, loader as hostVansLoader
} from "./pages/Host/Vans"
import HostVanInfo, { loader as hostVanInfoLoader } from "./pages/Host/HostVanInfo"
import Reviews from "./pages/Host/Reviews"
import About from "./pages/About"
import Vans, { loader as vansLoader } from "./pages/Vans"
import VanDetails, { loader as vanDetailsLoader } from "./pages/VanDetails"
import Details from "./pages/Host/Details"
import Pricing from "./pages/Host/Pricing"
import Photos from "./pages/Host/Photos"
import NotFound from "./pages/NotFound"
import Error from "./components/Error"
import Login from "./components/Login"

import "./server"
import { requireAuth } from "./utils"


const router = createBrowserRouter(
    createRoutesFromElements(
        <Route element={<Layout />}>
            <Route path="*" element={<NotFound />} />
            <Route index element={<Home />} />

            <Route path="host" element={<HostLayout />}>
                <Route 
                    index 
                    element={<Dashboard />} 
                />
                <Route 
                    path="income" 
                    element={<Income />} 
                    loader={async ()=> await  requireAuth()}
                />
                <Route
                    path="vans"
                    element={<HostVans />}
                    loader={hostVansLoader}
                />
                <Route
                    path="vans/:id"
                    element={<HostVanInfo />}
                    loader={hostVanInfoLoader}
                >
                    <Route index element={<Details />} />
                    <Route path="pricing" element={<Pricing />} />
                    <Route path="photos" element={<Photos />} />
                </Route>
                <Route path="reviews" element={<Reviews />} />
            </Route>

            <Route path="about" element={<About />} />
            <Route path="vans"
                loader={vansLoader}
                element={<Vans />}
                errorElement={<Error />}
            />
            <Route
                path="vans/:id"
                element={<VanDetails />}
                loader={vanDetailsLoader}
            />
            <Route path="login" element={<Login />} />
        </Route>
    )
)

export default function App() {
    return (
        <RouterProvider router={router} />
    )
}
2

Hi there!

Could you check out the “Updates” section of the associated GitHub repo and see if either of the points there is a fix to your issue?

Very shortly after I launched the course, React Router posted an update that made this code break and I had to find a workaround. :man_facepalming:t2: I’m hoping when React Router 7 comes out that I’ll be able to record a new course for it and hopefully have all these kinds of issues fixed.

3

Thank you so much, I’ll checkout the repo.

4

The solution worked for the loaders that weren’t fetching data.

import { Link, useLoaderData } from "react-router-dom"
import { getHostVans } from "../../fetch"
import { requireAuth } from "../../utils"

export async function loader() {  
  await requireAuth() // completely doesn't do anything for some reason
  return getHostVans()
}

const Vans = () => {

  const vanList = useLoaderData()

  const renderedVans = vanList.map(van => {
    return (
      <Link to={van.id} key={van.id}>
        <div className="van-list--item">
          <img src={van.imageUrl} alt="" />
          <div>
            <h2>{van.name}</h2>
            <p>{van.price}/day</p>
          </div>
        </div>
      </Link>
    )
  })

  return (
    <div className="host--vans">
      <h1>Your listed Vans</h1>
      <div className="van-list-wrapper">
        {renderedVans}
      </div>
    </div>
  )
}
export default Vans

Any suggestions?

5

Would you be able to push your code to GitHub and post a link to the repository so I could try running it on my side?

6

Sure here is a link to the repo repo

7

I’m experiencing the same issue. Have you found a solution yet?