`<A>` component to allow overriding `link={true/false}` #321

LexSwed · 2023-12-10T15:22:37Z

LexSwed
Dec 10, 2023

I need one specific link to make a full page reload (from landing page to app page – for the request to go through middleware).

When using explicitLinks={false} (default <Router> behaviour):

If I just use <a> client routing is used and adding link={false} doesn't go through SSR due to this;
If I use <A>, I can't specify <A link={false}> to prevent client routing, as it's hardcoded;

When using explicitLinks={true}:

In every place of the app I now need to use <A> component. Use <a> for my use case. This means I need my stylised link component to check which anchor it needs to render.
This could be simplified if link={false} could be provided to the <A> component directly instead.

Edit: I actually have to avoid adding link= attribute altogether, as <a link="false"> is still intercepted as a Router link, due to getAttribute('link') check. Again, having customisable true/false would help here.

Maybe I could use route actions for what I try to achieve? (Edit: see first message, no)

// /routes/login.tsx
export const route = {
  async load() {
    // can I redirect here? can I access request event here?
    await checkAndRedirect()
  },
};

// /routes/app/layout.tsx
export const route = {
  async load() {
    // can I redirect here? can I access request event here?
    await checkAndRedirect()
  },
};

But this means I need to setup the route loaders for every route I want to protect (here I'm using layout, but can I use a different layout?)

I didn't manage Stackblitz to work with current solid-start, but in case one wants to run locally.

LexSwed · 2023-12-10T15:35:10Z

LexSwed
Dec 10, 2023
Author

Just checked, this will be run on the client only on navigation (so won't make an additional request):

// routes/login.tsx
export const route = {
  async load() {
    // using latest vinxi alpha
    const event = getRequestEvent();
    await checkAndRedirect(event)
  },
};

0 replies

Brendan-csel · 2023-12-10T20:21:47Z

Brendan-csel
Dec 10, 2023

Yeah the previous router version was the same behaviour as explicitLinks={true}.

Luckly, there are a couple more things you can do to get the router to ignore a link click...

<a target="_self"> - the router ignores anchors with any target attribute.
<a rel="download"> or <a rel="external"> - the router ignores these particular attribute values

This should probably get added to the README.

1 reply

AlexErrant Aug 12, 2024

Added!

pilcrowonpaper · 2023-12-25T13:31:14Z

pilcrowonpaper
Dec 25, 2023

Had the same issue when I needed to redirect the user to an API route. The target and rel thing should probably be mentioned in the docs

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

`<A>` component to allow overriding `link={true/false}` #321

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 3 comments 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

<A> component to allow overriding link={true/false} #321

Uh oh!

Uh oh!

LexSwed Dec 10, 2023

Replies: 3 comments · 1 reply

Uh oh!

Uh oh!

LexSwed Dec 10, 2023 Author

Uh oh!

Uh oh!

Brendan-csel Dec 10, 2023

Uh oh!

AlexErrant Aug 12, 2024

Uh oh!

pilcrowonpaper Dec 25, 2023

`<A>` component to allow overriding `link={true/false}` #321

LexSwed
Dec 10, 2023

Replies: 3 comments 1 reply

LexSwed
Dec 10, 2023
Author

Brendan-csel
Dec 10, 2023

pilcrowonpaper
Dec 25, 2023