https://github.com/justinline/usebacknavigation

react-router hook for smarter back navigation in complex web apps
https://github.com/justinline/usebacknavigation

history hooks react react-router remix routing

Last synced: about 3 hours ago
JSON representation

react-router hook for smarter back navigation in complex web apps

• Host: GitHub
• URL: https://github.com/justinline/usebacknavigation
• Owner: justinline
• License: mit
• Created: 2024-06-14T17:51:13.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-06-14T21:30:26.000Z (5 months ago)
• Last Synced: 2024-06-14T22:39:54.753Z (5 months ago)
• Topics: history, hooks, react, react-router, remix, routing
• Language: TypeScript
• Homepage:
• Size: 48.8 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# useBackNavigation()

A hook used in react-router apps that solves common problems:

## Problem 1

- Your web app has modals (under urls) which open and have the ability to be closed by an X or similar

- Your modals also have sub-routes/sub-pages which the user can navigate through, pushing to the history stack

- When you click the X, you want to close the entire modal and go back to where you opened it from, regardless of where you navigated to since opening it

```tsx

function MyModal() {

    const { backUrl } = useBackNavigation();

    return (

        

            
My Modal

            

            


                
Sub-Route

                
Sub-Route 2

            

            

            {/* This will never change while the modal is mounted. */}

            Close

        

    );

}


function Dashboard() {

    const { createBackUrlState } = useBackNavigation();

    return (

        


            
Dashboard

            Open Modal

        

    );

}

```


1. `useBackNavigation()` is used in the modal component that we want to open.

1.  Entrypoints to said modal (links, buttons, `useNavigate` etc) use `useBackNavigation()` to push to `location.state` when they navigate i.e `Open Modal`

1. `useBackNavigation()` in point 1 sets the `backUrl` from `location.state` that was pushed in 2 and can now build functions that will navigate to that `backUrl` when triggered.

1. Closing X in the modal has something like `Close`

## Problem 2

- A user lands at your app on a modal with a closing X

- We have no previous in-app route to go back to, so we just want to go back to the root of the app

```tsx

function MyModal() {

    const { backUrl } = useBackNavigation();

    return (

        

            
My Modal

            Close

        

    );

}

```


1. if `backUrl` is undefined, we want can fallback to a desired route.

## Problem 3

- When a user clicks to go back, i.e on a "back arrow" in a header of some sort

- You want to go back to the previous route that was in the URL bar before they clicked the back arrow

- However, it might be that they landed on said route from somewhere outside the app

- We don't want to send the user back outside the app

- If we detect that a route is a "landing route" by using the `useSetLandingRoute` we can detect this and act accordingly.

- When the user clicks back we can do the following:

  - Is it a landing route? Go to the root of the app

  - Do we have a backUrl in the state? Go to that route

  - Otherwise, `navigate(-1)` on the browser history

```tsx

function AppRoot() {

    useSetLandingRoute();

    return 

}

function SomePageWithBackArrow() {

    const { onBack } = useBackNavigation();

    return (

        

            Back

            
content...

        

    );

}

```