TanStack•4y ago•

6 replies

popular-magenta

Possible to go back with the Link component?

I have a question regarding whether it is possible to use the <Link> component, to go back?

Use Case:

This is a basic idea of my routes set-up which are functioning as expected.

/ -> Dashboard/Home page
/agreements -> Search page
/agreements/$agreementId -> Agreement View Page ($agreementId is variable)

/ -> Dashboard/Home page
/agreements -> Search page
/agreements/$agreementId -> Agreement View Page ($agreementId is variable)

On both the

and

/agreements

/agreements

page, I have links present that would direct the user to the

/agreements/$agreementId

/agreements/$agreementId

page. In the future, I have more Links than take the users to this page.

What I'm looking to do, is to add a visual element on the page for the user to be able to click on (aside from the browser back button) , to take them back to the previous page. I'd prefer it to be a <Link> component since it is Cmd+Click-able.

Currently, I'm using the

useRouter()

useRouter()

router.history.back()

router.history.back()

function and tying it the

onClick

onClick

of button element, since using a <Link> component and handling its onClick just seems a bit weird and rather redundant.

Note

I'm on

@tanstack/[email protected]

@tanstack/[email protected]

using a standard Router (not a hash or memory).

export const router = createReactRouter({
  routeConfig,
  parseSearch: parseSearchWith((value) => JSON.parse(decodeFromBinary(value))),
  stringifySearch: stringifySearchWith((value) =>
    encodeToBinary(JSON.stringify(value))
  ),
});

export const router = createReactRouter({
  routeConfig,
  parseSearch: parseSearchWith((value) => JSON.parse(decodeFromBinary(value))),
  stringifySearch: stringifySearchWith((value) =>
    encodeToBinary(JSON.stringify(value))
  ),
});

An idea of what this "visual element" I'm talking about is.... its basically my own back-button, but within the bounds of the application. ->

TanStack•4y ago•

6 replies

popular-magenta

Possible to go back with the Link component?

I have a question regarding whether it is possible to use the <Link> component, to go back?

Use Case:

This is a basic idea of my routes set-up which are functioning as expected.

/ -> Dashboard/Home page
/agreements -> Search page
/agreements/$agreementId -> Agreement View Page ($agreementId is variable)

/ -> Dashboard/Home page
/agreements -> Search page
/agreements/$agreementId -> Agreement View Page ($agreementId is variable)

On both the

and

/agreements

/agreements

page, I have links present that would direct the user to the

/agreements/$agreementId

/agreements/$agreementId

useRouter()

useRouter()

router.history.back()

router.history.back()

function and tying it the

onClick

onClick

of button element, since using a <Link> component and handling its onClick just seems a bit weird and rather redundant.

Note

I'm on

@tanstack/[email protected]

@tanstack/[email protected]

using a standard Router (not a hash or memory).

export const router = createReactRouter({
  routeConfig,
  parseSearch: parseSearchWith((value) => JSON.parse(decodeFromBinary(value))),
  stringifySearch: stringifySearchWith((value) =>
    encodeToBinary(JSON.stringify(value))
  ),
});

export const router = createReactRouter({
  routeConfig,
  parseSearch: parseSearchWith((value) => JSON.parse(decodeFromBinary(value))),
  stringifySearch: stringifySearchWith((value) =>
    encodeToBinary(JSON.stringify(value))
  ),
});

An idea of what this "visual element" I'm talking about is.... its basically my own back-button, but within the bounds of the application. ->

Possible to go back with the Link component?

Use Case:

Note

Similar Threads

Possible to go back with the Link component?

Use Case:

Note

Similar Threads

Similar Threads

Similar Threads