adobe / adobe/react-spectrum

RouterProvider API aligned with React Router "data router" (standard since 6.4)

Open
#7,799 1 comment 0 reactions 0 assignees View on GitHub
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 (and others) would very much like to see an updated `RouterProvider` API, which plays nicely with React Router's new "data router" API which has been around for more than a year, since v6.4.

### 🤔 Expected Behavior?

https://react-spectrum.adobe.com/react-aria/routing.html#react-router should work seamlessly with https://reactrouter.com/6.29.0/routers/create-browser-router

### 😯 Current Behavior

I don't think that the APIs are well aligned?

React router enforces a coupling between their own `` and it's prop, `routes`.

React Aria's `` wants to sit between those two, something no longer possible.

### 💁 Possible Solution

1. "Fix it". I'm afraid I'm not sure how much of an effort this might be, I'm just here to communicate a need.
2. Deprecate it. If you are not intending to continue supporting React Router (this is quite an "old" API by now), it would be nice to have that clearly stated in the docs. Additionally, consider documenting robust workarounds, such as https://github.com/adobe/react-spectrum/discussions/7594 (yet to be used by me, so I can't vouch for it)

### 🔦 Context

Personally I'm trying to make the `` component work with a `createBrowserRouter`-based React Router setup.

Others seem to be struggling with similar issues:
- https://github.com/adobe/react-spectrum/discussions/6352
- https://github.com/adobe/react-spectrum/discussions/6381
- https://github.com/adobe/react-spectrum/discussions/7594

### 💻 Examples

_No response_

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.