Skip to content

docs: move the react-only guides to top-level and restrict in config.json #6713

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
SeanCassiere merged 4 commits into from
Feb 20, 2026
+21 −21
Merged

docs: move the react-only guides to top-level and restrict in config.json #6713

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8daad64
docs: move react-location migration guide to top-level
SeanCassiere Feb 20, 2026
d929c1e
docs: move react-router migration guide to top-level
SeanCassiere Feb 20, 2026
70b6b8f
docs: restore original filenames
SeanCassiere Feb 20, 2026
52de20a
apply coderabbit suggestion
SeanCassiere Feb 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/router/config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,11 +83,11 @@
"children": [
{
"label": "Migrate from React Router",
"to": "framework/react/installation/migrate-from-react-router"
"to": "installation/migrate-from-react-router"
},
{
"label": "Migrate from React Location",
"to": "framework/react/installation/migrate-from-react-location"
"to": "installation/migrate-from-react-location"
}
]
},
Expand Down
36 changes: 18 additions & 18 deletions ...stallation/migrate-from-react-location.md → ...stallation/migrate-from-react-location.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,27 @@
title: Migration from React Location
---

Before you begin your journey in migrating from React Location, it's important that you have a good understanding of the [Routing Concepts](../../../routing/routing-concepts.md) and [Design Decisions](../../../decisions-on-dx.md) used by TanStack Router.
Before you begin your journey in migrating from React Location, it's important that you have a good understanding of the [Routing Concepts](../routing/routing-concepts.md) and [Design Decisions](../decisions-on-dx.md) used by TanStack Router.

## Differences between React Location and TanStack Router

React Location and TanStack Router share much of same design decisions concepts, but there are some key differences that you should be aware of.

- React Location uses _generics_ to infer types for routes, while TanStack Router uses _module declaration merging_ to infer types.
- Route configuration in React Location is done using a single array of route definitions, while in TanStack Router, route configuration is done using a tree of route definitions starting with the [root route](../../../routing/routing-concepts.md#the-root-route).
- [File-based routing](../../../routing/file-based-routing.md) is the recommended way to define routes in TanStack Router, while React Location only allows you to define routes in a single file using a code-based approach.
- TanStack Router does support a [code-based approach](../../../routing/code-based-routing.md) to defining routes, but it is not recommended for most use cases. You can read more about why, over here: [why is file-based routing the preferred way to define routes?](../../../decisions-on-dx.md#why-is-file-based-routing-the-preferred-way-to-define-routes)
- Route configuration in React Location is done using a single array of route definitions, while in TanStack Router, route configuration is done using a tree of route definitions starting with the [root route](../routing/routing-concepts.md#the-root-route).
- [File-based routing](../routing/file-based-routing.md) is the recommended way to define routes in TanStack Router, while React Location only allows you to define routes in a single file using a code-based approach.
- TanStack Router does support a [code-based approach](../routing/code-based-routing.md) to defining routes, but it is not recommended for most use cases. You can read more about why, over here: [why is file-based routing the preferred way to define routes?](../decisions-on-dx.md#why-is-file-based-routing-the-preferred-way-to-define-routes)

## Migration guide

In this guide we'll go over the process of migrating the [React Location Basic example](https://github.com/TanStack/router/tree/react-location/examples/basic) over to TanStack Router using file-based routing, with the end goal of having the same functionality as the original example (styling and other non-routing related code will be omitted).
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Hyphenate the compound adjective non-routing-related.

"non-routing related code" should be "non-routing-related code" — compound adjectives preceding a noun require hyphenation.

📝 Proposed fix 
-In this guide we'll go over the process of migrating the [React Location Basic example](https://github.com/TanStack/router/tree/react-location/examples/basic) over to TanStack Router using file-based routing, with the end goal of having the same functionality as the original example (styling and other non-routing related code will be omitted).
+In this guide we'll go over the process of migrating the [React Location Basic example](https://github.com/TanStack/router/tree/react-location/examples/basic) over to TanStack Router using file-based routing, with the end goal of having the same functionality as the original example (styling and other non-routing-related code will be omitted).
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
In this guide we'll go over the process of migrating the [React Location Basic example](https://github.com/TanStack/router/tree/react-location/examples/basic) over to TanStack Router using file-based routing, with the end goal of having the same functionality as the original example (styling and other non-routing related code will be omitted).
In this guide we'll go over the process of migrating the [React Location Basic example](https://github.com/TanStack/router/tree/react-location/examples/basic) over to TanStack Router using file-based routing, with the end goal of having the same functionality as the original example (styling and other non-routing-related code will be omitted).
🧰 Tools
🪛 LanguageTool

[grammar] ~18-~18: Use a hyphen to join words.
Context: ...l example (styling and other non-routing related code will be omitted). > [!TIP]...

(QB_NEW_EN_HYPHEN)

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@docs/router/installation/migrate-from-react-location.md` at line 18, Update
the sentence in the migration guide to hyphenate the compound adjective: change
"non-routing related code" to "non-routing-related code" in the introductory
paragraph (the line referencing the React Location Basic example and omitted
styling/other non-routing-related code) so the compound adjective preceding
"code" is correctly hyphenated.


> [!TIP]
> To use a code-based approach for defining your routes, you can read the [code-based Routing](../../../routing/code-based-routing.md) guide.
> To use a code-based approach for defining your routes, you can read the [code-based Routing](../routing/code-based-routing.md) guide.
### Step 1: Swap over to TanStack Router's dependencies

First, we need to install the dependencies for TanStack Router. For detailed installation instructions, see our [How to Install TanStack Router](../../../how-to/install.md) guide.
First, we need to install the dependencies for TanStack Router. For detailed installation instructions, see our [How to Install TanStack Router](../how-to/install.md) guide.

```sh
npm install @tanstack/react-router @tanstack/router-devtools
Expand Down Expand Up @@ -57,7 +57,7 @@ export default defineConfig({
})
```

However, if your application does not use Vite, you use one of our other [supported bundlers](../../../routing/file-based-routing.md#getting-started-with-file-based-routing), or you can use the `@tanstack/router-cli` package to watch for changes in your routes files and automatically update the routes configuration.
However, if your application does not use Vite, you use one of our other [supported bundlers](../routing/file-based-routing.md#getting-started-with-file-based-routing), or you can use the `@tanstack/router-cli` package to watch for changes in your routes files and automatically update the routes configuration.

### Step 3: Add the file-based configuration file to your project

Expand All @@ -70,7 +70,7 @@ Create a `tsr.config.json` file in the root of your project with the following c
}
```

You can find the full list of options for the `tsr.config.json` file [here](../../../routing/file-based-routing.md).
You can find the full list of options for the `tsr.config.json` file in the [File-Based Routing](../routing/file-based-routing.md) guide.

### Step 4: Create the routes directory

Expand Down Expand Up @@ -249,19 +249,19 @@ You should now have successfully migrated your application from React Location t

React Location also has a few more features that you might be using in your application. Here are some guides to help you migrate those features:

- [Search params](../../../guide/search-params.md)
- [Data loading](../../../guide/data-loading.md)
- [History types](../../../guide/history-types.md)
- [Wildcard / Splat / Catch-all routes](../../../routing/routing-concepts.md#splat--catch-all-routes)
- [Authenticated routes](../../../guide/authenticated-routes.md)
- [Search params](../guide/search-params.md)
- [Data loading](../guide/data-loading.md)
- [History types](../guide/history-types.md)
- [Wildcard / Splat / Catch-all routes](../routing/routing-concepts.md#splat--catch-all-routes)
- [Authenticated routes](../guide/authenticated-routes.md)

TanStack Router also has a few more features that you might want to explore:

- [Router Context](../../../guide/router-context.md)
- [Preloading](../../../guide/preloading.md)
- [Pathless Layout Routes](../../../routing/routing-concepts.md#pathless-layout-routes)
- [Route masking](../../../guide/route-masking.md)
- [SSR](../../../guide/ssr.md)
- [Router Context](../guide/router-context.md)
- [Preloading](../guide/preloading.md)
- [Pathless Layout Routes](../routing/routing-concepts.md#pathless-layout-routes)
- [Route masking](../guide/route-masking.md)
- [SSR](../guide/ssr.md)
- ... and more!

If you are facing any issues or have any questions, feel free to ask for help in the TanStack Discord.
2 changes: 1 addition & 1 deletion ...installation/migrate-from-react-router.md → ...installation/migrate-from-react-router.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ toc: false

Here is the [example repo](https://github.com/Benanna2019/SickFitsForEveryone/tree/migrate-to-tanstack/router/React-Router)

- [ ] Install Router - `npm i @tanstack/react-router` (see [detailed installation guide](../../../how-to/install.md))
- [ ] Install Router - `npm i @tanstack/react-router` (see [detailed installation guide](../how-to/install.md))
- [ ] **Optional:** Uninstall React Router to get TypeScript errors on imports.
- At this point I don’t know if you can do a gradual migration, but it seems likely you could have multiple router providers, not desirable.
- The api’s between React Router and TanStack Router are very similar and could most likely be handled in a sprint cycle or two if that is your companies way of doing things.
Expand Down
Loading