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.
ReturnNavigationContext
Install the 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>
);
}
ForwardLink
Using Add a ForwardLink
to automatically add a return location to a link.
Note:
ForwardLink
wrapsLink
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>
);
}
BackwardLink
Using Add a BackwardLink
to add a link to return the user to the previous location.
Note:
BackwardLink
also wrapsLink
from@remix-run/react
, but it does not acceptto
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>
);
}
BackwardLink
content using a FunctionalComponent
Fully customize the 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.