feat(react-router): add useCanGoBack #3017

tomrehnstrom · 2024-12-15T18:31:09Z

nx-cloud · 2024-12-15T18:31:32Z

View your CI Pipeline Execution ↗ for commit d471ca4.

Command	Status	Duration	Result
`nx affected --targets=test:eslint,test:unit,tes...`	✅ Succeeded	4m 7s	View ↗
`nx run-many --target=build --exclude=examples/*...`	✅ Succeeded	1m 2s	View ↗

☁️ Nx Cloud last updated this comment at 2025-01-03 20:08:00 UTC

pkg-pr-new · 2024-12-15T18:33:18Z

Open in Stackblitz

More templates

@tanstack/arktype-adapter

npm i https://pkg.pr.new/@tanstack/arktype-adapter@3017

@tanstack/create-router

npm i https://pkg.pr.new/@tanstack/create-router@3017

@tanstack/eslint-plugin-router

npm i https://pkg.pr.new/@tanstack/eslint-plugin-router@3017

@tanstack/history

npm i https://pkg.pr.new/@tanstack/history@3017

@tanstack/react-cross-context

npm i https://pkg.pr.new/@tanstack/react-cross-context@3017

@tanstack/create-start

npm i https://pkg.pr.new/@tanstack/create-start@3017

@tanstack/react-router

npm i https://pkg.pr.new/@tanstack/react-router@3017

@tanstack/react-router-with-query

npm i https://pkg.pr.new/@tanstack/react-router-with-query@3017

@tanstack/router-cli

npm i https://pkg.pr.new/@tanstack/router-cli@3017

@tanstack/router-devtools

npm i https://pkg.pr.new/@tanstack/router-devtools@3017

@tanstack/router-generator

npm i https://pkg.pr.new/@tanstack/router-generator@3017

@tanstack/router-plugin

npm i https://pkg.pr.new/@tanstack/router-plugin@3017

@tanstack/router-vite-plugin

npm i https://pkg.pr.new/@tanstack/router-vite-plugin@3017

@tanstack/start

npm i https://pkg.pr.new/@tanstack/start@3017

@tanstack/start-vite-plugin

npm i https://pkg.pr.new/@tanstack/start-vite-plugin@3017

@tanstack/valibot-adapter

npm i https://pkg.pr.new/@tanstack/valibot-adapter@3017

@tanstack/virtual-file-routes

npm i https://pkg.pr.new/@tanstack/virtual-file-routes@3017

@tanstack/zod-adapter

npm i https://pkg.pr.new/@tanstack/zod-adapter@3017

commit: d471ca4

schiller-manuel · 2024-12-15T19:01:27Z

packages/history/src/index.ts

+      // This is a fallback for when updating the router and there are history entries without index
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      const currentIndex = location.state.index ?? 0
+      state = assignKey({ ...state, index: currentIndex + 1 })


can we put this logic into assigKey()?

schiller-manuel · 2024-12-15T19:01:35Z

packages/history/src/index.ts

+      // This is a fallback for when updating the router and there are history entries without index
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      const currentIndex = location.state.index ?? 0
+      state = assignKey({ ...state, index: currentIndex })


same as above, can we put this logic into assigKey()?

schiller-manuel · 2024-12-15T19:02:43Z

packages/history/src/index.ts

@@ -551,6 +568,7 @@ export function createMemoryHistory(
      entries[index] = path
    },
    back: () => {
+      console.log('back', index)


schiller-manuel · 2024-12-15T21:33:22Z

packages/history/src/index.ts

@@ -51,17 +52,12 @@ export interface ParsedPath {

 export interface HistoryState {
  key?: string
+  index: number


shouldn't this be index?: number as the index is not set for the initial entry?

also, i think we should use a more ... obscure name to not collide with user data

e.g. __TSR_index ?

It's always available after we run through parseHref, this is because, if the route has no state (should be valid only for initial route), we default it to { index: 0 }. About the naming, sure, but by that logic, shouldn't the key also be renamed?

ideally, yes. but the key has been there since the beginning, but adding an index now could introduce a breaking change

schiller-manuel · 2024-12-15T21:48:15Z

packages/react-router/tests/router.test.tsx

+  return { router }
+}
+
+describe('history: History gives correct notifcations and state', () => {


Suggested change

describe('history: History gives correct notifcations and state', () => {

describe('history: History gives correct notifications and state', () => {

schiller-manuel · 2024-12-15T21:49:09Z

packages/react-router/tests/router.test.tsx

+  })
+
+  const router = createRouter({
+    routeTree: rootRoute.addChildren([indexRoute, postsRoute]),


we should run the same test for all history types

schiller-manuel · 2024-12-15T23:12:38Z

packages/history/src/index.ts

-      subscriber({ location, action: { type: 'ROLLBACK' } }),
-    )
+  const handleIndexChange = (action: SubscriberHistoryAction) => {
+    if (opts.notifyOnIndexChange ?? true) notify(action)


can you please always use { } even for one liners?

schiller-manuel · 2024-12-15T23:14:03Z

packages/history/src/index.ts

@@ -375,9 +377,10 @@ export function createBrowserHistory(opts?: {
    }
  }

-  const onPushPop = () => {
+  // NOTE: this function can probably be removed


so can we remove it?

…nd has index in state

MTG2000 · 2025-01-06T08:01:49Z

Small question.

Is this new __TSR_index property in HistoryState expected to be manually set every time we set a value for the state property on navigate, <Link>, ...etc?

Cause after updating my router version I started getting this error:

navigate({ state: { foo: "bar" } })
^
"Type '{ foo: "bar" }' is not assignable to type 'true | NonNullableUpdater<HistoryState> | undefined'.
  Property '__TSR_index' is missing in type '{ key: string; }' but required in type 'HistoryState'.ts(2322)"

Should I manually assign it with some value (like 0), or is there a better way?

schiller-manuel · 2025-01-06T08:31:50Z

no this is meant to be automatically set

@ferretwithaberet we need to make it optional

ccapndave · 2025-01-06T09:26:59Z

After updating I'm getting this error all over my code too.

 Property '__TSR_index' is missing in type '{ stackId: string; }' but required in type 'HistoryState'.

schiller-manuel reviewed Dec 15, 2024

View reviewed changes

ferretwithaberet mentioned this pull request Dec 15, 2024

fix(history): browser transitions being skipped for router.history navigation calls #2999

Closed

schiller-manuel mentioned this pull request Dec 15, 2024

View Transition API not working for router.history navigation calls #2983

Closed

schiller-manuel reviewed Dec 15, 2024

View reviewed changes

tomrehnstrom and others added 11 commits January 3, 2025 20:31

fix: ensured that history does not notify twice for certain actions a…

7bccf44

…nd has index in state

tests: add router tests for history location notifications

c8ebcfd

add canGoBack history method and useCanGoBack hook

7bd26f7

improve forward/back/go, change index key, fix memory history

f74d3ab

docs for useCanGoBack

eb92a12

add useCanGoBack docs to router API reference

5e7ca2e

mark useCanGoBack as experimental

f696d17

ci: apply automated fixes

f4eca00

add test for useCanGoBack

1fbb39f

add e2e test for useCanGoBack

c37d643

fix duplicate react import

b655f9b

schiller-manuel force-pushed the main branch from c5cf0a9 to b655f9b Compare January 3, 2025 19:32

schiller-manuel added 2 commits January 3, 2025 20:39

make backbutton disabled state visible by striking through

473c8ad

fix e2e tests

d471ca4

schiller-manuel changed the title ~~fix: ensured that history does not notify twice for certain actions and has index in state~~ feat(react-router): add useCanGoBack Jan 3, 2025

schiller-manuel merged commit 366848e into TanStack:main Jan 3, 2025
5 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(react-router): add useCanGoBack #3017

feat(react-router): add useCanGoBack #3017

tomrehnstrom commented Dec 15, 2024 •

edited by schiller-manuel

Loading

nx-cloud bot commented Dec 15, 2024 •

edited

Loading

pkg-pr-new bot commented Dec 15, 2024 •

edited

Loading

schiller-manuel Dec 15, 2024

schiller-manuel Dec 15, 2024

schiller-manuel Dec 15, 2024

schiller-manuel Dec 15, 2024

ferretwithaberet Dec 15, 2024

schiller-manuel Dec 15, 2024

schiller-manuel Dec 15, 2024

schiller-manuel Dec 15, 2024

schiller-manuel Dec 15, 2024

schiller-manuel Dec 15, 2024

MTG2000 commented Jan 6, 2025

schiller-manuel commented Jan 6, 2025

ccapndave commented Jan 6, 2025

	describe('history: History gives correct notifcations and state', () => {
	describe('history: History gives correct notifications and state', () => {

feat(react-router): add useCanGoBack #3017

feat(react-router): add useCanGoBack #3017

Conversation

tomrehnstrom commented Dec 15, 2024 • edited by schiller-manuel Loading

nx-cloud bot commented Dec 15, 2024 • edited Loading

pkg-pr-new bot commented Dec 15, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MTG2000 commented Jan 6, 2025

schiller-manuel commented Jan 6, 2025

ccapndave commented Jan 6, 2025

tomrehnstrom commented Dec 15, 2024 •

edited by schiller-manuel

Loading

nx-cloud bot commented Dec 15, 2024 •

edited

Loading

pkg-pr-new bot commented Dec 15, 2024 •

edited

Loading