Skip to content

Commit 214c8a6

Browse files
committed
docs: other fixups
1 parent 88c15d9 commit 214c8a6

5 files changed

Lines changed: 14 additions & 56 deletions

File tree

docs/router/decisions-on-dx.md

Lines changed: 3 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -93,17 +93,7 @@ This only gets worse as you begin to use more features of the router, such as ne
9393
9494
What we found to be the best way to define your routes is to abstract the definition of the route configuration outside of the route-tree. Then stitch together your route configurations into a single cohesive route-tree that is then passed into the `createRouter` function.
9595

96-
<!-- ::start:framework -->
97-
98-
# React
99-
100-
You can read more about [code-based routing](./framework/react/routing/code-based-routing.md) to see how to define your routes in this way.
101-
102-
# Solid
103-
104-
You can read more about [code-based routing](./framework/solid/routing/code-based-routing.md) to see how to define your routes in this way.
105-
106-
<!-- ::end:framework -->
96+
You can read more about [code-based routing](./routing/code-based-routing.md) to see how to define your routes in this way.
10797

10898
> [!TIP]
10999
> Finding Code-based routing to be a bit too cumbersome? See why [file-based routing](#why-is-file-based-routing-the-preferred-way-to-define-routes) is the preferred way to define your routes.
@@ -172,19 +162,8 @@ We went with **module declaration**, as it is what we found to be the most scala
172162
173163
Something you'll notice (quite soon) in the TanStack Router documentation is that we push for **file-based routing** as the preferred method for defining your routes. This is because we've found that file-based routing is the most scalable and maintainable way to define your routes.
174164

175-
<!-- ::start:framework -->
176-
177-
# React
178-
179-
> [!TIP]
180-
> Before you continue, it's important you have a good understanding of [code-based routing](./framework/react/routing/code-based-routing.md) and [file-based routing](./framework/react/routing/file-based-routing.md).
181-
182-
# Solid
183-
184165
> [!TIP]
185-
> Before you continue, it's important you have a good understanding of [code-based routing](./framework/solid/routing/code-based-routing.md) and [file-based routing](./framework/solid/routing/file-based-routing.md).
186-
187-
<!-- ::end:framework -->
166+
> Before you continue, it's important you have a good understanding of [code-based routing](./routing/code-based-routing.md) and [file-based routing](./routing/file-based-routing.md).
188167
189168
As mentioned in the beginning, TanStack Router was designed for complex applications that require a high degree of type-safety and maintainability. And to achieve this, the configuration of the router has been done in a precise way that allows TypeScript to infer the types of your routes as much as possible.
190169

@@ -258,14 +237,4 @@ That's it! No need to worry about defining the `getParentRoute` function, stitch
258237

259238
At no point does the TanStack Router Bundler Plugin take away your control over your route configurations. It's designed to be as flexible as possible, allowing you to define your routes in a way that suits your application whilst reducing the boilerplate and complexity of the route configuration.
260239

261-
<!-- ::start:framework -->
262-
263-
# React
264-
265-
Check out the guides for [file-based routing](./framework/react/routing/file-based-routing.md) and [code-splitting](./framework/react/guide/code-splitting.md) for a more in-depth explanation of how they work in TanStack Router.
266-
267-
# Solid
268-
269-
Check out the guides for [file-based routing](./framework/solid/routing/file-based-routing.md) and [code-splitting](./framework/solid/guide/code-splitting.md) for a more in-depth explanation of how they work in TanStack Router.
270-
271-
<!-- ::end:framework -->
240+
Check out the guides for [file-based routing](./routing/file-based-routing.md) and [code-splitting](./guide/code-splitting.md) for a more in-depth explanation of how they work in TanStack Router.

docs/router/faq.md

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -27,18 +27,7 @@ You should commit this file into git so that other developers can use it to buil
2727
## Can I conditionally render the Root Route component?
2828

2929
No, the root route is always rendered as it is the entry point of your application.
30-
31-
<!-- ::start:framework -->
32-
33-
# React
34-
35-
If you need to conditionally render a route's component, this usually means that the page content needs to be different based on some condition (e.g. user authentication). For this use case, you should use a [Layout Route](./framework/react/routing/routing-concepts.md#layout-routes) or a [Pathless Layout Route](./framework/react/routing/routing-concepts.md#pathless-layout-routes) to conditionally render the content.
36-
37-
# Solid
38-
39-
If you need to conditionally render a route's component, this usually means that the page content needs to be different based on some condition (e.g. user authentication). For this use case, you should use a [Layout Route](./framework/solid/routing/routing-concepts.md#layout-routes) or a [Pathless Layout Route](./framework/solid/routing/routing-concepts.md#pathless-layout-routes) to conditionally render the content.
40-
41-
<!-- ::end:framework -->
30+
If you need to conditionally render a route's component, this usually means that the page content needs to be different based on some condition (e.g. user authentication). For this use case, you should use a [Layout Route](./routing/routing-concepts.md#layout-routes) or a [Pathless Layout Route](./routing/routing-concepts.md#pathless-layout-routes) to conditionally render the content.
4231

4332
You can restrict access to these routes using a conditional check in the `beforeLoad` function of the route.
4433

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

Lines changed: 8 additions & 8 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 [here](../../../routing/file-based-routing.md).
7474

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

docs/router/integrations/query.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: TanStack Query Integration
44
---
55

66
> [!IMPORTANT]
7-
> This integration automates SSR dehydration/hydration and streaming between TanStack Router and TanStack Query. If you haven't read the standard [External Data Loading](../framework/react/guide/external-data-loading.md) guide, start there.
7+
> This integration automates SSR dehydration/hydration and streaming between TanStack Router and TanStack Query. If you haven't read the standard [External Data Loading](../guide/external-data-loading.md) guide, start there.
88
99
## What you get
1010

docs/start/framework/react/guide/isr.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -442,5 +442,5 @@ Track key metrics:
442442
- [Static Prerendering](./static-prerendering.md) - Build-time page generation
443443
- [Hosting](./hosting.md) - CDN deployment configurations
444444
- [Server Functions](./server-functions.md) - Creating dynamic data endpoints
445-
- [Data Loading](../../../../router/framework/react/guide/data-loading.md) - Client-side cache control
445+
- [Data Loading](../../../../router/guide/data-loading.md) - Client-side cache control
446446
- [Middleware](./middleware.md) - Request/response customization

0 commit comments

Comments
 (0)