T
TanStack•3y ago
quickest-silver

Structure for react-refresh

What's a good way to structure files to make react-refresh work? I export Route objects from one file per route and inline my components in the Route options to get the typescript props automatically, but that causes react-refresh to fail. Exporting both the Route and the component from the same file as separate consts causes eslint react-refresh warnings.
1 Reply
genetic-orange
genetic-orange•3y ago
Export Route object from a .ts file. 
export const signupRoute = new Route({
    path: "/signup",
    getParentRoute: () => preAuthLayout,
    pendingComponent: LoadingIndicator,
    component: lazyRouteComponent(() => import("@/preauth/SignUpPage")),
});
export const signupRoute = new Route({
    path: "/signup",
    getParentRoute: () => preAuthLayout,
    pendingComponent: LoadingIndicator,
    component: lazyRouteComponent(() => import("@/preauth/SignUpPage")),
});
Import component from .tsx file - SignUpPage.tsx

Did you find this page helpful?