How to navigate back?

[Rkaede]

Whats the best way to impliment a back button?

If you've entered the site on a deeply nested link, both history.back() and the following:

function BackButton() {
  const navigate = useNavigate(); 
  return <button onClick={() => navigate(-1)}>Back</button>
}

will take you back to the previous website.

[Brendan-csel]

That sounds like the correct behavior.

If you want to navigate to somewhere else, you'd need to specifically navigate("/mypage").

[Rkaede]

A bit more context from my end might help. The examples that I gave were bad.

I'm looking to emulate the behavior of twitter.

Given the following link there are the following scenarios:

https://twitter.com/RyanCarniato/status/1613990210169376768

1. Log into twitter. Click on 10 different links and end up at that tweet. The back button navigates back through that history, all the way Home (which doesn't have a back button).
2. Go directly to that link. When clicking on back there is no history so it navigates to Home.

What would be the best approach for this?

[Brendan-csel]

It looks like Twitter is specifically handling the click on their back arrow and deciding where to navigate themselves. Like if you inspect the button, it is not even an anchor <a> and where they navigate to doesn't match the browser history.

So essentially it looks like they are maintaining their own browser history stack. Or perhaps they have a global flag they set when arriving on a Twitter page, and if that flag was not set previously then the arrow navigates to their home page instead - otherwise it does navigate(-1) like normal ...something hacky like that.

[Rkaede]

Yep, it's exactly that. For anyone else wanting to do the same, here's the pattern that I settled on.

1. Create a custom <Link> component that wraps arround <A> and pushes the current path into the state of that route.

import { A, AnchorProps, useLocation } from '@solidjs/router';

export function Link(props: AnchorProps) {
  const location = useLocation();
  return <A state={{ previous: location.pathname }} {...props} />;
}

2. The back button, which is loaded on most routes, will check for this state. If it's empty, then the current page must be the first one loaded. In this case we navigate to the /home route instead of going back to the previous page.

export function BackButton() {
  const navigate = useNavigate();
  const location = useLocation();

  const backPath = () => (location.state?.previous ? -1 : '/home');

  return <button onClick={() => navigate(backPath())}>Back</button>;
}

It seems to be working OK so far. However, there might be some unforseen edge cases.