@briandlee/remix-return-navigation
TypeScript icon, indicating that this package has built-in type declarations

1.2.5 • Public • Published

remix-return-navigation

Create smooth return navigation with Remix. This library retains all existing state within a URL, promotes the use of native web practices for navigation, and makes return navigation easy to implement for both clients with and without Javascript enabled.

Getting started

npm i --save @briandlee/remix-return-navigation

View the Demo

The live demo is available at https://remix-return-navigation.brian-dlee.dev/.

The code for the demo is in the demo directory.

Install the ReturnNavigationContext

Installing the context allows the application to encapsulate the server provided referrer as we as listening for client-side navigations. The context must be installed so that the returnLocation will be computed and available to ForwardLink components.

import type { LoaderFunction } from '@remix-run/node';
import { json } from '@remix-run/node';
import {
  getReturnNavigationState,
  ReturnNavigationContextProvider,
} from '@briandlee/remix-return-navigation';

export const loader: LoaderFunction = async ({ request }) => {
  const state = getReturnNavigationState(request);

  return json({ referrer: state.referrer, requestUrl: state.requestUrl });
};

export default function App() {
  const { referrer, requestUrl } = useLoaderData();
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <ReturnNavigationContextProvider referrer={referrer} requestUrl={requestUrl}>
          <Outlet />
        </ReturnNavigationContextProvider>
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

Using ForwardLink

Add a ForwardLink to automatically add a return location to a link.

Note: ForwardLink wraps Link from @remix-run/react. It only adds the current location as a search param to enable return navigation.

import { ForwardLink } from '@briandlee/remix-return-navigation';

export default function SourcePage() {
  return (
    <div>
      <h1>Hello, {user.displayName}</h1>
      <ForwardLink to={'target'}>Go</ForwardLink>
    </div>
  );
}

Using BackwardLink

Add a BackwardLink to add a link to return the user to the previous location.

Note: BackwardLink also wraps Link from @remix-run/react, but it does not accept to since it generates it from the current return location.

import type { LoaderFunction } from '@remix-run/node';
import { json } from '@remix-run/node';
import { BackwardLink } from '@briandlee/remix-return-navigation';

export default function TargetPage() {
  return (
    <div>
      <h1>Hello, {user.displayName}</h1>
      <BackwardLink fallback="/profile" fallbackContent={"Go to Profile"}>
        Return
      </BackwardLink>
    </div>
  );
}

Fully customize the BackwardLink content using a FunctionalComponent

import type {LoaderFunction} from '@remix-run/node';
import {json} from '@remix-run/node';
import {BackwardLink, BackwardLinkFC} from '@briandlee/remix-return-navigation';

export default function TargetPage() {
  return (
    <div>
      <h1>Hello, {user.displayName}</h1>
      <BackwardLink render={LinkContent} />
    </div>
  );
}

const LinkContent: BackwardLinkFC = ({ returnLocation }) => {
  if (returnLocation) {
    return (
      <><Icon name={'back'} /> Go back to {returnLocation.pathname}</>
    )
    
    return <><Icon name={'home'} /> Go home</>
  }
}

Related issues

Works around a known issue: https://github.com/remix-run/remix/issues/3510


Created by me.

Package Sidebar

Install

npm i @briandlee/remix-return-navigation

Weekly Downloads

0

Version

1.2.5

License

MIT

Unpacked Size

35.5 kB

Total Files

27

Last publish

Collaborators

  • briandlee