btholt / btholt/complete-intro-to-react-v9

The React Ecosystem - Routing

Open Beginner friendly
#21 0 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.