File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change 1+ ---
2+ layout : default
3+ title : " React-admin With TanStack Start"
4+ ---
5+
6+ # React-admin With TanStack Start
7+
8+ React-admin supports [ TanStack Router] ( https://tanstack.com/router/latest ) as an alternative to react-router. This allows you to use react-admin in a TanStack Start application.
9+
10+ ## Installation
11+
12+ Install the TanStack Router adapter and the required router packages:
13+
14+ ``` bash
15+ npm install react-admin ra-router-tanstack @tanstack/react-router @tanstack/history
16+ # or
17+ yarn add react-admin ra-router-tanstack @tanstack/react-router @tanstack/history
18+ ```
19+
20+ ## Configuration
21+
22+ Configure ` Admin ` to use ` tanStackRouterProvider ` :
23+
24+ ``` tsx
25+ import { Admin , Resource , ListGuesser } from ' react-admin' ;
26+ import { tanStackRouterProvider } from ' ra-router-tanstack' ;
27+ import { dataProvider } from ' ./dataProvider' ;
28+
29+ const App = () => (
30+ <Admin
31+ dataProvider = { dataProvider }
32+ routerProvider = { tanStackRouterProvider }
33+ >
34+ <Resource name = " posts" list = { ListGuesser } />
35+ <Resource name = " comments" list = { ListGuesser } />
36+ </Admin >
37+ );
38+
39+ export default App ;
40+ ```
41+
42+ ## Next Steps
43+
44+ For standalone vs embedded setups, see the [ TanStack Router Integration] ( ./TanStackRouter.md ) .
Original file line number Diff line number Diff line change 1616 < li {% if page.path == 'Remix.md ' %} class ="active " {% endif %} > < a class ="nav-link " href ="./Remix.html "> Remix</ a > </ li >
1717 < li {% if page.path == 'ReactRouterFramework.md ' %} class ="active " {% endif %} > < a class ="nav-link " href ="./ReactRouterFramework.html "> React Router Framework</ a > </ li >
1818 < li {% if page.path == 'Deploy.md ' %} class ="active beginner " {% endif %} > < a class ="nav-link " href ="./Deploy.html "> Deployment</ a > </ li >
19+ < li {% if page.path == 'TanStackStart.md ' %} class ="active " {% endif %} > < a class ="nav-link " href ="./TanStackStart.html "> TanStack Start</ a > </ li >
1920</ ul >
2021
2122< ul > < div > Guides & Concepts</ div >
You can’t perform that action at this time.
0 commit comments