rubber-blue

Determine if a navigation would go to the previous page.

Hey!

I am trying to wrap the

Link

Link

component such that if the link would cause a navigation to what was the previous page, instead it will run

history.back()

history.back()

. My idea is to store the last location locally, figure out what the next location will be and then either return the router

Link

Link

or do a history back. I've got as far as this:

import { Link, LinkComponent, useRouter } from "@tanstack/react-router";
import { ReactNode, useMemo } from "react";

export const ThreadLink: LinkComponent<"a"> = (props) => {
  const goBack = useMemo(() => {
        // TODO: decide if we are actually going back
    return false;
  }, []);

  if (goBack) {
    return (
      <div className="cursor-pointer" onClick={() => history.back()}>
        {props.children as ReactNode}
      </div>
    );
  } else {
    return <Link {...props} />;
  }
};

import { Link, LinkComponent, useRouter } from "@tanstack/react-router";
import { ReactNode, useMemo } from "react";

export const ThreadLink: LinkComponent<"a"> = (props) => {
  const goBack = useMemo(() => {
        // TODO: decide if we are actually going back
    return false;
  }, []);

  if (goBack) {
    return (
      <div className="cursor-pointer" onClick={() => history.back()}>
        {props.children as ReactNode}
      </div>
    );
  } else {
    return <Link {...props} />;
  }
};

but in order to implement

goBack

goBack

I need to somehow calculate the

location

location

from the

props

props

that will be passed to

Link

Link

without

Link

Link

actually being clicked. I've looked through the router API, but can't figure out how to do do this.

Is there a function somewhere to help me, or is there a better way to achieve this?

TanStack•2y ago

rubber-blue

Determine if a navigation would go to the previous page.

Hey!

I am trying to wrap the

Link

Link

component such that if the link would cause a navigation to what was the previous page, instead it will run

history.back()

history.back()

. My idea is to store the last location locally, figure out what the next location will be and then either return the router

Link

Link

or do a history back. I've got as far as this:

import { Link, LinkComponent, useRouter } from "@tanstack/react-router";
import { ReactNode, useMemo } from "react";

export const ThreadLink: LinkComponent<"a"> = (props) => {
  const goBack = useMemo(() => {
        // TODO: decide if we are actually going back
    return false;
  }, []);

  if (goBack) {
    return (
      <div className="cursor-pointer" onClick={() => history.back()}>
        {props.children as ReactNode}
      </div>
    );
  } else {
    return <Link {...props} />;
  }
};

import { Link, LinkComponent, useRouter } from "@tanstack/react-router";
import { ReactNode, useMemo } from "react";

export const ThreadLink: LinkComponent<"a"> = (props) => {
  const goBack = useMemo(() => {
        // TODO: decide if we are actually going back
    return false;
  }, []);

  if (goBack) {
    return (
      <div className="cursor-pointer" onClick={() => history.back()}>
        {props.children as ReactNode}
      </div>
    );
  } else {
    return <Link {...props} />;
  }
};

but in order to implement

goBack

goBack

I need to somehow calculate the

location

location

from the

props

props

that will be passed to

Link

Link

without

Link

Link

actually being clicked. I've looked through the router API, but can't figure out how to do do this.

Is there a function somewhere to help me, or is there a better way to achieve this?

Determine if a navigation would go to the previous page.

Similar Threads

Determine if a navigation would go to the previous page.

Similar Threads

Similar Threads

Similar Threads