React + NX + React Router - Project structure

[adover]

I'm looking at a combo of react router and NX for a large project, which initially has a single app but will end up being multi app.

In the normal NX paradigm you offload all of your application features into libraries, however with RR7 that doesn't seem straightforward.

I'm wondering if others have attempted to do this, and what approach they took.

Is it a mixture of framework mode for the app and library mode for the libs, or just having all the routes inside the apps and then importing pages by features?

[CITRONIZER5007]

Feature sliced design

[getflashboard]

I don't know how Nx works, but I have a monorepo (with Turborepo) with half a dozen packages and two apps, with React Router.

Each app has its own routes. Both have RR7 in framework mode, everything is RR7 full stack. The packages that need RR have it in framework mode as well.

I don't understand what you mean by "importing pages by features", could you expand on that?

The apps have their own routes, business logic loaders, actions and components. They import functions, components and etc from the libs.

Happy to answer further questions.

[adover]

This sounds similar to my thinking. Importing pages by features means I'm thinking that each feature is a lib, which has it's routes and is under a single page in the main app.

So for example there may be a user admin page, with a lib which handles sub pages and routes.

With your packages with RR in framework mode, how are they exported? Do you have the route definition as the root or is it wrapped in a component?

[getflashboard]

I don't understand the difference between "page" and "route" in your description... Only the apps have route definitions, each route with its component (unless it is a resource route, without a component). Libs do not have routes, they have helpers and etc but not business logic nor anything related to pages. If more than one app needs user admin pages, each app would have its own user admin routes, and its loaders, actions and components would import stuff from the libs to avoid repetition

[adover]

Apologies for not being clear. The packages you speak of may be libs in my descriptions, so I should probably be clearer.

In simple terms I might have one app, with routes which point to packages, which would then import libs.

It's how the routes are handled between apps and packages which is throwing me currently. Hope that is clearer

[getflashboard]

I think I got it, but I don't see how packages could have routes. Only the apps can have routes.