How to compose routes with modules ?

[jalik]

Here's the context, let say I have several modules in my app (users, roles, permissions...), and each of these modules provide their own routes like below (just user module for simplicity).

User module routes

• /admin/users
• /admin/users/add
• /admin/users/:id/edit
• /sign-in
• /sign-out

Those modules may be provided as ES modules from other packages.

The question is how do I declare them (from the package owner side) and how do I import them (from the consumer side) as routes in RRv6 ?

It's stupid but I tried to wrap routes with <Fragment> and with <Routes> inside a <Routes>, but nothing seems to be supported.

Below is a non working example of what I am trying to do.

// Public user routes
function UserRouter() {
  return (
    <Routes>
      <Route
        path="/sign-in"
        element={<SignInPage />}
      />
      <Route
        path="/sign-out"
        element={<SignOutPage />}
      />
    </Routes>
  );
}

// Admin user routes
function UserAdminRouter() {
  return (
    <Routes>
      <Route
        path="/admin/users"
        element={<UserListPage />}
      />
      <Route
        path="/admin/users/add"
        element={<AddUserPage />}
      />
      <Route
        path="/admin/users/:id/edit"
        element={<EditUserPage />}
      />
    </Routes>
  );
}

// App routes
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route
          path="/"
          element={<HomePage />}
        />
        <UserRouter />
        <UserAdminRouter />
        <Route
          path="*"
          element={<NotFoundPage />}
        />
      </Routes>
    </BrowserRouter>
  );
}

To be clear I would like to import routes declared in other files into a <Routes> without having to know the routes I am importing, like the Rest and Spread operators in JS.

I always found that RR was not enough flexible on this aspect, and it's even worst with the enforced relative route paths in v6, which does not allow to include a UserRouter (that would also contains routes of UserAdminRouter) in multiple places (/admin/* and /*).

[mjackson]

Use React fragments for pieces of your route config instead of a <Routes> element.

let UserRoutes = (
  <>
    <Route
      path="/sign-in"
      element={<SignInPage />}
    />
    <Route
      path="/sign-out"
      element={<SignOutPage />}
    />
  </>
);

let AdminUserRoutes = (
  <Route
    path="/admin/users"
    element={<UserListPage />}
  />
  <Route
    path="/admin/users/add"
    element={<AddUserPage />}
  />
  <Route
    path="/admin/users/:id/edit"
    element={<EditUserPage />}
  />
);

let AppRoutes = (
  <>
    <Route
      path="/"
      element={<HomePage />}
    />
    {UserRoutes}
    {AdminUserRoutes}
    <Route
      path="*"
      element={<NotFoundPage />}
    />
  </>
);

it's even worst with the enforced relative route paths in v6

We don't force your route paths to be relative. We support absolute nested paths. We just don't support them yet in a descendant <Routes> element. You can follow #8035 to be updated when we add support for that.

[toml0006]

@mjackson This doesn't appear to work in 6.2.x. Take a look at the example here: https://codesandbox.io/s/fervent-wozniak-29w39?file=/src/App.js routing to /b fails.

[joeyfigaro]

@mjackson This doesn't appear to work in 6.2.x. Take a look at the example here: https://codesandbox.io/s/fervent-wozniak-29w39?file=/src/App.js routing to /b fails.

@toml0006 easy to miss–you need to make sure your routes are contained within a fragment:

// this
const RouteB = (
  <Route path="b"  element={<>PAGE B RENDERED</>} />
)

// instead of this
const RouteB = () => <Route path="b"  element={<>PAGE B RENDERED</>} />