Skip to content

Commit 8bdf8d6

Browse files
docs: move the react-only guides to top-level and restrict in config.json (TanStack#6713)
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
1 parent 4def459 commit 8bdf8d6

File tree

3 files changed

+21
-21
lines changed

3 files changed

+21
-21
lines changed

docs/router/config.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,11 +83,11 @@
8383
"children": [
8484
{
8585
"label": "Migrate from React Router",
86-
"to": "framework/react/installation/migrate-from-react-router"
86+
"to": "installation/migrate-from-react-router"
8787
},
8888
{
8989
"label": "Migrate from React Location",
90-
"to": "framework/react/installation/migrate-from-react-location"
90+
"to": "installation/migrate-from-react-location"
9191
}
9292
]
9393
},

docs/router/framework/react/installation/migrate-from-react-location.md renamed to docs/router/installation/migrate-from-react-location.md

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,27 @@
22
title: Migration from React Location
33
---
44

5-
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.
5+
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.
66

77
## Differences between React Location and TanStack Router
88

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

1111
- React Location uses _generics_ to infer types for routes, while TanStack Router uses _module declaration merging_ to infer types.
12-
- 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).
13-
- [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.
14-
- 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)
12+
- 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).
13+
- [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.
14+
- 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)
1515

1616
## Migration guide
1717

1818
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).
1919

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

25-
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.
25+
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.
2626

2727
```sh
2828
npm install @tanstack/react-router @tanstack/router-devtools
@@ -57,7 +57,7 @@ export default defineConfig({
5757
})
5858
```
5959

60-
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.
60+
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.
6161

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

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

73-
You can find the full list of options for the `tsr.config.json` file [here](../../../routing/file-based-routing.md).
73+
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.
7474

7575
### Step 4: Create the routes directory
7676

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

250250
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:
251251

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

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

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

267267
If you are facing any issues or have any questions, feel free to ask for help in the TanStack Discord.

docs/router/framework/react/installation/migrate-from-react-router.md renamed to docs/router/installation/migrate-from-react-router.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ toc: false
77

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

10-
- [ ] Install Router - `npm i @tanstack/react-router` (see [detailed installation guide](../../../how-to/install.md))
10+
- [ ] Install Router - `npm i @tanstack/react-router` (see [detailed installation guide](../how-to/install.md))
1111
- [ ] **Optional:** Uninstall React Router to get TypeScript errors on imports.
1212
- 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.
1313
- 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.

0 commit comments

Comments
 (0)