How would one make a responsive master-detail view with createBrowserRouter?

[LeunensMichiel]

For context:

for example, I have a list of users and a detail view component. On mobile, when I click on a user in the list, i'd like to navigate to the detail page. When I'm on desktop, I'd like to have those two next to eachother.

I can only find examples of previous versions with the Switch component, but I don't know how this could be achieved in V6.

Anyone that could help? Thanks!

[puopg]

You would likely need to think of the details view and list view as joint, and not as seperate.

What I mean is, when you think about this as seperate views, DetailsView or ListView, Switch or rather <Routes> is great for that. That thing is designed to match a url, and select a component. This is great for your mobile situation but not good for desktop.

For desktop, you need both components to render when you reach a url like /users/:userId. But what's stopping you from rendering a single right?

<div>
  <div>
    <Routes>
       <Route path="/user" element={<ListView />} />
       <Route path="/user/*" element={<ListView />} />
    </Routes>
  </div>

  <div>
    <Routes>
       <Route path="/user/:userId" element={<DetailsView />} />
    </Routes>
  </div>
</div>

And you definitely can detect mobile vs desktop, so just consider picking a different layout based on that.

mobile.tsx

<div>
  <div>
    <Routes>
       <Route path="/user" element={<ListView />} />
       <Route path="/user/:userId" element={<DetailsView />} />
    </Routes>
  </div>
</div>

Skin it however you want.

[LeunensMichiel]

Gee thanks! This clears that up for me indeed.

But if I understand it correctly, you can only achieve this by using the JSX routes syntax, correct?
In the tutorial of React Router v6, createBrowserRouter is used instead like below:

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    loader: rootLoader,
    children: [
      {
        path: "team",
        element: <Team />,
        loader: teamLoader,
      },
    ],
  },
]);

But here you can't build this object with conditional logic (like checking for window size/media queries), as its declared outside of the React scope no? (Or perhaps I'm missing something)

[puopg]

TBH i havent used the static url config yet, but cant you use downstream/within a component like say Team?

either way, checking for window size is a JS thing, not isolated to React. So u should be able to do whatever you need before React even enters the picture. But lets say you for some reason don't know it for a little bit.

In this setup, Root and a sub path Team. When you go to "/team", I believe youll get:

<Root>
  <Team />
</Root>

From Root, you can tell "Am I desktop or mobile?". So for mobile, you want just Team to display right? You can do stuff like:

• If children is not defined, render whatever I have. Otherwise if children is defined, render the children.
  • On desktop, dont perform this conditional render and just throw children into a different place in the view.
• Look at the path using useLocation and determine should I render children() in favor of my Root view?

[brophdawg11]

I would avoid thinking of these as separate "routes"/"navigations" when on mobile versus desktop. Instead, they're the same route/navigation and you can use CSS to hide portions of the UX on certain displays

const router = createBrowserRouter([{
  path: "/",
  Component: Root,
  children: [{
    path: "users",
    Component: UsersList
    children: [{
      path: ":id",
      Component: UserDetail
    }],
  }],
}]);

function UsersList() {
  let outlet = useOutlet();
  return (
    <>
      {/* hide the list portion of the UX when on mobile and we have an 
          outlet, indicating we're on the detail view */
      <List className={outlet != null ? "hide-on-mobile-only" : ""} />
      {/* UserDetail shows via the Outlet */}
      {outlet}
    </>
}

function UserDetail() {
  return (
    <>
      {/* Provide a way to go back to the list view on mobile *}
      <Link to=".." class="show-on-mobile-only" />
      <div>
        {/* User Details */}
      </div>
    </>
  };
}

[VillePakarinenPosti]

With v5 the docs had a section about responsive routes.

I would love to read your take on the topic and if the philosophy has changed with SSR and other v6 related changes. ✌️

[brophdawg11]

Data fetching changes the story since you want to decouple fetching from rendering. In order to do that, the router needs to know about the routes ahead of time so it can fetch before rendering. That's what the createBrowserRouter/RouterProvider apis are for. You could 100% still do the approach in the v5 docs with BrowserRouter.

I personally prefer managing a single responsive DOM instead of separate mobile/desktop displays. And using HTML/CSS primitives when possible and reaching for JS when those do not suffice.

[gvozdenkov]

I would avoid thinking of these as separate "routes"/"navigations" when on mobile versus desktop. Instead, they're the same route/navigation and you can use CSS to hide portions of the UX on certain displays

@brophdawg11 Can you explain in more detail, please? I figured it out and loved the philosophy of the react router and remix. But I realized that I don’t understand at all how to make a UI for a desktop and a mobile using a react router and Data API. Everything turns out elegant and beautiful for a desktop. But I can’t figure out how to cleverly hide and show part of the interface on a mobile device.

For example, I have completed the first steps of the official tutorial (repo). Now I would like to make it so that on the desktop the left sidebar with contacts is displayed and on the right the contact details.

While on the mobile device only the contact list is displayed. When you click on a contact, it should replace the contact list. When you click back - go back to showing the list.

The most I can do is hide the left sidebar for mobile view and show an extra button on the contact to go back. But I can't go back because the left sidebar is hidden for mobile view. A vicious circle.

How can this be done using the nested routes philosophy to form the interface?

[magnusmb]

How can this be done using the nested routes philosophy to form the interface?

You can use the useMatch hook to check if you're in the /contacts/:contactId part of the tree, and conditionally add a CSS-class to the sidebar like @brophdawg11 demonstrated.

Example:

// in `RootLayout`

const isShowingContact = useMatch("/contacts/:contactId")
…
return (
  <nav className={isShowingContact ? "sidebar hide-on-mobile" : "sidebar"}>
    …
  </nav>
)

[gvozdenkov]

@magnusmb Thank you! Will try this! Sounds cool! 🔥