Recovery from error in errorComponent

Hi guys, I just decided to switch to Tanstack Router and I think I love it, but due to incompleted docs I have some issues with recovering from error in errorComponent.

function ChooseLocationError({ error }: ErrorComponentProps) {
  if ('cause' in error) {
    return (
      <div>
        <WarningOutlined className="text-xl" />
        <h1>Oh dear! It appears you missed a step.</h1>
        <Button asChild>
          <Link to="/" replace>
            Go to homepage
          </Link>
        </Button>
      </div>
    );
  }

  return <ErrorComponent error={error} />;
}

function ChooseLocationError({ error }: ErrorComponentProps) {
  if ('cause' in error) {
    return (
      <div>
        <WarningOutlined className="text-xl" />
        <h1>Oh dear! It appears you missed a step.</h1>
        <Button asChild>
          <Link to="/" replace>
            Go to homepage
          </Link>
        </Button>
      </div>
    );
  }

  return <ErrorComponent error={error} />;
}

How to recover from the error in that component? When I click the Link and go back to homepage I still have the error

TanStack•3y ago•

2 replies

inadequate-blush

Recovery from error in errorComponent

Hi guys, I just decided to switch to Tanstack Router and I think I love it, but due to incompleted docs I have some issues with recovering from error in errorComponent.

function ChooseLocationError({ error }: ErrorComponentProps) {
  if ('cause' in error) {
    return (
      <div>
        <WarningOutlined className="text-xl" />
        <h1>Oh dear! It appears you missed a step.</h1>
        <Button asChild>
          <Link to="/" replace>
            Go to homepage
          </Link>
        </Button>
      </div>
    );
  }

  return <ErrorComponent error={error} />;
}

function ChooseLocationError({ error }: ErrorComponentProps) {
  if ('cause' in error) {
    return (
      <div>
        <WarningOutlined className="text-xl" />
        <h1>Oh dear! It appears you missed a step.</h1>
        <Button asChild>
          <Link to="/" replace>
            Go to homepage
          </Link>
        </Button>
      </div>
    );
  }

  return <ErrorComponent error={error} />;
}

How to recover from the error in that component? When I click the Link and go back to homepage I still have the error

Recovery from error in errorComponent

Similar Threads

Recovery from error in errorComponent

Similar Threads

Similar Threads

Similar Threads