adobe / adobe/react-spectrum

support `next/link` `as="..."` prop to mask routes when using client side routing

Open
#5,482 1 comment 0 reactions 0 assignees View on GitHub
RAC
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### Provide a general summary of the feature here

i'd like to be able to use nextjs's route masking via the `as` prop. [here](https://nextjs.org/docs/pages/api-reference/components/link#middleware)'s the prop in the nextjs documentation.

### 🤔 Expected Behavior?

can use `` or similar syntax with `react-aria-components`

### 😯 Current Behavior

the `as` prop is not allowed, and users will be taken to the un-masked `href` that we don't necessarily want them to see.

### 💁 Possible Solution

allow passing some data up to the top level router, maybe?

### 🔦 Context

in our app, our URL's don't always correspond to the nextjs page paths behind the scenes. we use `` to rewrite the visible path of the url for the user.

I'm really excited about `react-aria-components` and its support for client-side-routing, but I don't see a way to use the behavior together.

### 💻 Examples

_No response_

### 🧢 Your Company/Team

replit.com

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the linked Next.js Link documentation, then trace react-aria-components' client-side-routing behavior and how Link values reach the top-level router. Confirm how href and as should interact, and consider the work complete when the requested syntax preserves the masked visible route during client-side navigation.

Written by the indexing model from the issue text.

Assessment

Tech stack
next.js, react
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.