Edit - Stack Overflow

You are not logged in. Your edit will be placed in a queue until it is peer reviewed.

We welcome edits that make the post easier to understand and more valuable for readers. Because community members review edits, please try to make the post substantially better than how you found it, for example, by fixing grammar or adding additional resources and hyperlinks.

Required fields*

Reuse the same user routes under '/' (UserLayout) and '/admin' (AdminLayout) without duplication

I need to define user pages (Home, Cows, Reports, ...) once and make them accessible to AppUser + Admin under "/" with UserLayout, and also accessible to Admin under "/admin/user/*" but rendered inside AdminLayout. When I try to reuse the same route array in both places, I sometimes get UserLayout showing for "/admin/user/" or matching conflicts due to absolute vs relative paths. I'm looking for an idiomatic pattern to mount the same relative child routes under two parents (two layouts) without duplication and without layout leaks.

I mounted user pages only under "/" inside UserLayout, guarded for both roles (AppUser + Admin). I mounted admin-only pages under "/admin/*" inside AdminLayout, guarded for Admin only.

Router (what I did):

router.jsx (essentials)

{
 element: <RequireAuth />,
 children: [
 {
 path: "/",
 element: <UserLayout />,
 children: [
 {
 element: <RequireRole allowed={[Roles.AppUser, Roles.Admin]} />,
 children: [
 { path: "/", element: <Home /> },
 { path: "/cows", element: <AnimalManagement /> },
 // ...other user pages under "/"
 ],
 },
 ],
 },
 {
 path: "/admin",
 element: <RequireRole allowed={[Roles.Admin]} />,
 children: [
 {
 path: "/admin",
 element: <AdminLayout />,
 children: [
 { path: "/admin/dashboard", element: <AdminDashboard /> },
 // ...other admin-only pages under "/admin"
 ],
 },
 ],
 },
 ],
}

Expectation:

When an Admin clicks user pages from the admin sidebar, I want those pages to render inside AdminLayout (so the admin shell/Sidebar stays visible), even though the same pages are also available at "/" for both roles.

Actual result:

Because user pages exist only under "/", navigating to them shows UserLayout, not AdminLayout. I’m looking for an React-Router/React-Router-DOM v6 pattern to mount the same user routes under "/admin/user/*" (alias) so they render inside AdminLayout—without duplicating the route definitions or breaking role guards.

Answer*

If I am understanding your question correctly, you are trying to render a set of "common" routes both under the root `"/"` path and also under the `"/admin"` path.

The first main issue I see in your router definition is that you are specifying ***absolute*** route paths everywhere. This makes it incredibly difficult, probably impossible, to allow using the routes anywhere but where they exactly match and specify. You should be using relative paths. E.G. paths that ***do not*** start with the `"/"` character. This will allow you to move a route around anywhere and it will always match relative to its parent route.

A second issue is defining paths on your layout routes. While this is perfectly fine and can work in most cases, you will typically want to avoid adding a `path` prop to your layout routes as you want them to typically only enforce ***UI layout*** and not participate in routing.

Here is my suggestion:

1. Create a definition of your "common routes", i.e. the routes you wish to render under multiple parent routes.

```javascript
const commonUserAndAdminRoutes = [
 { path: "cows", element: <AnimalManagement /> },
 { path: "sheep", element: /* .... */ },
 { path: "pigs", element: /* .... */ },
 // ...etc...
];
```

2. Update the router to use ***relative*** route paths and spread in the common routes where you want/need them.

```javascript
const router = createBrowserRouter([
 {
 // pathless route!
 element: <RequireAuth />,
 children: [
 {
 // pathless route!
 element: <RequireRole allowed={[Roles.AppUser, Roles.Admin]} />,
 children: [
 {
 // pathless route!
 element: <UserLayout />,
 children: [
 // index route matches "/"
 { index: true, element: <Home /> },

 // common routes match relative to "/"
 ...commonUserAndAdminRoutes,

 // ...other user pages under "/"
 ],
 },
 ],
 },
 {
 path: "admin",
 element: <RequireRole allowed={[Roles.Admin]} />,
 children: [
 {
 // pathless route!
 element: <AdminLayout />,
 children: [
 // index route matches "/admin" and redirects to "/admin/dashboard"
 { index: true, element: <Navigate to="dashboard" replace /> },

 // matches "/admin/dashboard"
 { path: "dashboard", element: <AdminDashboard /> },

 // common routes match relative to "/admin"
 ...commonUserAndAdminRoutes,

 // ...other admin-only pages under "/admin"
 ],
 },
 ],
 },
 ],
 },
]);
```

If you want admins to see the same `AdminLayout` on `"/"` and other non-`"/admin"` routes (*instead of `UserLayout`*) then my suggestion would be create a dynamic layout route component that renders either of `UserLayout` or `AdminLayout` depending on the role or whatever criteria you need.

Example:

```javascript
const UserOrAdminLayout = () => {
 const isAdmin = /* compute this */;
 return isAdmin
 ? <AdminLayout />
 : <UserLayout />;
};
```
```javascript
const router = createBrowserRouter([
 {
 element: <RequireAuth />,
 children: [
 {
 element: <RequireRole allowed={[Roles.AppUser, Roles.Admin]} />,
 children: [
 {
 element: <UserOrAdminLayout />,
 children: [
 { index: true, element: <Home /> },
 { path: "/cows", element: <AnimalManagement /> },
 // ...other user pages under "/"
 ],
 },
 ],
 },
 {
 path: "admin",
 element: <RequireRole allowed={[Roles.Admin]} />,
 children: [
 {
 element: <AdminLayout />,
 children: [
 { index: true, element: <Navigate to="dashboard" replace /> },
 { path: "dashboard", element: <AdminDashboard /> },
 // ...other admin-only pages under "/admin"
 ],
 },
 ],
 },
 ],
 },
]);
```

Draft saved

Draft discarded

Edit Summary*

Cancel

Add a comment |

How to Edit

Correct minor typos or mistakes
Clarify meaning without changing it
Add related resources or links
Always respect the author’s intent
Don’t use edits to reply to the author

How to Format

create code fences with backticks ` or tildes ~
```
like so
```
add language identifier to highlight code
```python
def function(foo):
print(foo)
```
put returns between paragraphs
for linebreak add 2 spaces at end
_italic_ or **bold**
indent code by 4 spaces
backtick escapes `like _so_`
quote by placing > at start of line
to make links (use https whenever possible)

<https://example.com>

[example](https://example.com)

<a href="https://example.com">example</a>

formatting help »
answering help »

How to Tag

A tag is a keyword or label that categorizes your question with other, similar questions. Choose one or more (up to 5) tags that will help answerers to find and interpret your question.

complete the sentence: my question is about...
use tags that describe things or concepts that are essential, not incidental to your question
favor using existing popular tags
read the descriptions that appear below the tag

If your question is primarily about a topic for which you can't find a tag:

combine multiple words into single-words with hyphens (e.g. python-3.x), up to a maximum of 35 characters
creating new tags is a privilege; if you can't yet create a tag you need, then post this question without it, then ask the community to create it for you

popular tags »

lang-js

CollectivesTM on Stack Overflow

Reuse the same user routes under '/' (UserLayout) and '/admin' (AdminLayout) without duplication

Answer*