What's the routing plan?

[affectful]

Mobile and web routers have different needs, mobile routers use stack based navigation. The only routers I know that handle that for react are ionic-router which is full of bugs and react-navigation which has dependencies on RNW and turns off gesture navigation for web.

[MoOx]

There is everything you need out there. I would not expect react-strict-dom to do something about the routing. You should probably have different routing solutions depending on the platform (e.g.: Next for the web, react-navigation for native). So yeah, this involves a part not shared across platforms, but it makes sense as you don't have the same thing available when working on a fullscreen iOS app, or a web page inside a Chrome browser. It does not make sense to try to share this part. Just use different routers.

[axyz]

I'm also looking into the topic, and agree that shouldn't be part of react-strict-dom core. That being said, there may be space for a standalone library (react-strict-router ? ).

It is true that there are many options out there, but handling the cross-platform logic in a RSD idiomatic way, may result in some patterns worth sharing.

Looking at existing solutions like react-router, react-navigation, expo-router, etc... an application based on react-strict-dom will likely need something like:

// Setting up a business/platform specific context

const router = createRouter(
  // path resolution
  // navigate() implementation
  // etc.
);
<RouterProvider router={router} />

Based on the platform and the application, there may be many way to resolve a path to either screens on the app or urls on web, this is likely going to be very specific per app, and not sure if and what could be a sensible default (maybe using app scoped url protocols?); but in practice it will likely end up being some wrapping of frameworks methods (e.g. nextjs / expo) or something custom.

// Provide a platform agnostic Link component that internally uses the context above
<Link
  to="https://example.com"
/>

// on web transaltes to
<html.a
  href="https://example.com" // resolved based on path resolution from context
>text</html.a>

// on native translates to
<html.a
  onClick={handleClick} // uses navigate() implementation from context
>text</html.a>

// there are a number of features likely needed

interface LinkProps extends Parameters<typeof html.a>[0] {
  // core props
  to: string; // URL or path to be resolved
  getProps?: (props: {
    isCurrent: boolean;
    href: string;
    location: { pathname: string; search: string; hash: string };
  }) => object; // function to get props based on active state
  block?: boolean; // display block, on react-native translates to View instead of Text (related: https://github.com/facebook/react-strict-dom/discussions/346)

  // should support renderFunction with platform aware props? Or should rely on
  // a hook for the custom use case? e.g. useLinkProps
  // another alternative is using asChild as an abstraction (radix-ui style), used by
  // expo router
  children?: React.ReactNode | ((props ) => React.ReactNode); // link content

  // additional
  replace?: boolean; // replace history entry
  prefetch?: "none" | "intent" | "render" | "viewport"; // prefetch strategy
  state?: object; // state to pass with navigation
  viewTransition?: boolean; // enable view transition

  // is it possible to store scroll position when doing a full page reload on
  // web? Should we use a sessionStorage similarly as for the state?
  preventScrollReset?: boolean; // prevent scroll reset on navigation

  // on web will need an heuristic to determine if we are doing a SPA navigation
  // or a regular href navigation.
  // should this prop exist? Or should we decide based on the path resolution?
  reloadDocument?: boolean; // force full page reload
}

// some hooks for navigating on demand without using Link

// hooks
const location = useLocation(); // get current location
const navigate = useNavigate(); // navigate programmatically

Some of the comments reflect some of my current doubts, but additionally there are also some broader open questions:

Buttons vs Links

related: #385

There is some controversy around this topic and while it is quite crucial for accessibility and correct semantics, there is not a clear definitive recommendation.
While on web it is generally accepted to use links for anything that “navigates” and buttons for anything executing an “action” in the current page, on the native side the concepts are more blurred.

On a high level there are 2 main approaches on the native side:

• Follow web semantics and consider anything navigating (even to an internal screen) as a role=link
• Only use role=link for “external” links (different app, browser, etc.), while using role=button for internal navigation to different screens within the same app.

If we embrace the first approach we may not need any additional complexity, but if we find the need to differentiate roles across platforms, we’ll need to provide an API for that use case as well as reasonable default behaviors.

---

I'm curious to hear your thoughts and if there is something I may be missing, and also if and how are you currently handling routing cross-platform

[Dovakeidy]

FWIW There has already been discussion about making TanStack Router compatible with React Native.

[axyz]

In that case I assume it would be enough to wrap with https://tanstack.com/router/latest/docs/framework/react/guide/custom-link#createlink-for-cross-cutting-concerns ? and maybe some additional examples could be added there for react-native, as well as react-strict-dom to render an html.a element