Splitting Routes into seperate files?

[dusky jacinth]

I was starting a new project, and I wanted to have a unique route file per feature as per react-bulletproof project structure.

I managed to achieve that, but when adding new routes to my feature/route.ts files I need to restart my app to have it actually accessible.

Is there some configuration I need to do to allow this type of setup?

[craggy bloom]

are you running your app with npm run dev?

[dusky jacinth]

Yes

[craggy bloom]

and you say that when you go to app/routes.ts and add a new route file it doesn't work?

or are you adding routes to somewhere like payments/routes.ts and then importing that from app/routes.ts?

[dusky jacinth]

//feature/routes.tsx
import { type RouteConfig, layout, route, index, prefix } from "@react-router/dev/routes";

export default [
    layout("../layouts/PortalLayout.tsx", [
        ...prefix("enquiries",[
            index("../features/portal/enquiries/pages/EnquiryList.tsx"),
            route(":id", "../features/portal/enquiries/pages/EnquiryDetails.tsx"),
            route(":id/messages", "../features/portal/enquiries/pages/Messages.tsx"),
            route(":id/messages/:messageId", "../features/portal/enquiries/pages/Message.tsx"),
            route(":id/quotes", "../features/portal/enquiries/pages/Quotes.tsx"),
            route(":id/createclient", "../features/portal/enquiries/pages/CreateClient.tsx")
        ]),
    ])
] satisfies RouteConfig;

//routes/index.tsx
import enquiriesRoutes from "../features/portal/enquiries/routes";
import homepageRoutes from "../features/frontpage/routes";

import { type RouteConfigEntry } from "@react-router/dev/routes";

export const appRoutes: RouteConfigEntry[] = [
    ...enquiriesRoutes,
    ...homepageRoutes,
];

//app/routes.ts
import { type RouteConfig, index } from "@react-router/dev/routes";
import { appRoutes } from "routes";
export default appRoutes satisfies RouteConfig;

Thats my current strategy

And if I add an additional route to feature/routes.tsx then it requires a restart.

[craggy bloom]

I'm not sure if that's supported

at least the paths in the route functions must be relative to inside app

not relative to your feature/routes.tsx file

also, those files are inside app, right?

everything must be inside app

you can add your features folders inside app

[dusky jacinth]

They live outside app, maybe I bring it down the tree and see how that pans out first.

[craggy bloom]

yeah that can be the issue

the bundler is not watching those files for changes

that's why you need to restart the process

[dusky jacinth]

Yeah, makes sense. I'll report back either way, thanks for the insight

[dusky jacinth]

@craggy bloom Thanks, that was indeed my issue - I can use the following and it rebuilds the routes if i add a new one.
Along the way I realised that the routes/index.ts just served the same purpose as app/routes.ts so removed it.

// app/routes.ts
import { type RouteConfig, index } from "@react-router/dev/routes";
import enquiriesRoutes from "./features/portal/enquiries/routes";
import homepageRoutes from "./features/frontpage/routes";

export default [
    ...enquiriesRoutes,
    ...homepageRoutes,
] satisfies RouteConfig;

// app/features/frontpage/enquiries/routes.tsx
import { layout, route, index, prefix } from "@react-router/dev/routes";
export default [
    layout("./layouts/PortalLayout.tsx", [
        ...prefix("enquiries",[
            index("./features/portal/enquiries/pages/EnquiryList.tsx"),
            route(":id", "./features/portal/enquiries/pages/EnquiryDetails.tsx"),
            route(":id/messages", "./features/portal/enquiries/pages/Messages.tsx"),
            route(":id/messages/:messageId", "./features/portal/enquiries/pages/Message.tsx"),
            route(":id/quotes", "./features/portal/enquiries/pages/Quotes.tsx"),
            route(":id/createclient", "./features/portal/enquiries/pages/CreateClient.tsx")
        ]),
    ])
];

[hasty elm]

You can use the relative helper for this:

import { relative } from "@react-router/dev/routes"

const { layout, route, index, prefix } = relative(__dirname)

(you may need to use import.meta.url to create __dirname in MJS)

[craggy bloom]

that should be in the docs

[dusky jacinth]

Thanks for that @hasty elm I've just added that into my project and it works as expected.

[craggy bloom]

I just wrote a tutorial about this https://sergiodxa.com/tutorials/split-routes-config-in-react-router

also you can use relative(import.meta.dirname) to get the dirname

something nice I found, you can do ...prefix("admin", admin) to prefix all routes from the new file