btholt / btholt/complete-intro-to-react-v9
The React Ecosystem - Routing
- Dominant language
- JavaScript
- Stars
- 771
- Forks
- 101
- PR merge metrics
- No merged PRs in 30d
Description
In the [routing section of the course](https://react-v9.holt.courses/lessons/ecosystem/tanstack-router), Brian explains how to setup TanStack Router instead of React Router. The versions installed are:
```
npm install @tanstack/react-router@1.65.0
npm install -D @tanstack/router-plugin@1.65.0 @tanstack/router-devtools@1.65.0
```
It looks like the TanStack team may have changed something, because when I tried to install these and setup my routing in `vite.config.js`, I got an error because the `generator` with TanStack is no longer automatically installed with the above versions. I tried to install the latest of TanStack Generator specifically, but then there was a version conflict with the above. [Related issue.](https://github.com/TanStack/router/issues/4380)
To solve, I just installed the latest versions (as of the time writing this):
```
npm install @tanstack/react-router@1.170.33
npm install -D @tanstack/router-plugin@1.168.36 @tanstack/router-devtools@1.167.1
```
Another call out is that I had to change the import in `vite.config.js` **from:**
```
import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
```
**To:**
```
import { tanstackRouter } from "@tanstack/router-plugin/vite";
```
And use that in `plugins`:
```
plugins: [tanstackRouter(), react()],
```
Also, small nitpick, but some of the headers in the course material reference "Tanstack" instead of "TanStack".
https://react-v9.holt.courses/lessons/ecosystem/tanstack-router
https://react-v9.holt.courses/lessons/ecosystem/tanstack-query
Contributor guide
No contributing guide indexed for this repository
Research direction
Open the routing and TanStack Query lesson pages linked in the issue and review their TanStack Router setup instructions, package versions, Vite import, and plugin configuration. Verify the current compatible package guidance, update the routing lesson accordingly, and correct the “Tanstack” capitalization in the referenced headers.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react, vite
- Domain
- documentation, frontend
- Issue type
- Documentation
- Difficulty
- 2/5
- Estimated time
- Half a day
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 75/100