https://github.com/brian-dlee/remix-return-navigation
Create smooth return navigation using Remix
https://github.com/brian-dlee/remix-return-navigation
html navigation no-javascript react referer remix ssr
Last synced: 5 months ago
JSON representation
Create smooth return navigation using Remix
- Host: GitHub
- URL: https://github.com/brian-dlee/remix-return-navigation
- Owner: brian-dlee
- License: mit
- Created: 2022-07-29T22:44:21.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-07-19T20:04:54.000Z (over 2 years ago)
- Last Synced: 2025-07-24T16:54:12.648Z (6 months ago)
- Topics: html, navigation, no-javascript, react, referer, remix, ssr
- Language: TypeScript
- Homepage: https://remix-return-navigation.brian-dlee.dev
- Size: 2.23 MB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
```shell
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](demo).
### 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.
```typescript jsx
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 (
);
}
```
### 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._
```typescript jsx
import { ForwardLink } from '@briandlee/remix-return-navigation';
export default function SourcePage() {
return (
Hello, {user.displayName}
Go
);
}
```
### 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._
```typescript jsx
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 (
Hello, {user.displayName}
Return
);
}
```
#### Fully customize the `BackwardLink` content using a FunctionalComponent
```typescript jsx
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 (
Hello, {user.displayName}
);
}
const LinkContent: BackwardLinkFC = ({ returnLocation }) => {
if (returnLocation) {
return (
<> Go back to {returnLocation.pathname}>
)
return <> Go home>
}
}
```
## Related issues
Works around a known issue: https://github.com/remix-run/remix/issues/3510
---
Created by [me](https://brian-dlee.dev/).