tanstack-router-react-mono

KO | EN

gitlite — search

#hacktoberfest #llm #go #android #machine-learning #deep-learning #linux #docker #awesome #cli #vue #security #mcp #open-source

tanstack-router-react-mono

(★ 8)

No description available.

tanstack-router-react-mono 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# TanStackRouterReactMono

This project is a monorepo containing TanStack router with feature and data libraries.

The issue with TanStack router is that it needs to be setup with typescript types augmentations. But that means that if you do that in the final app, the links in the libraries will not be type safe. So to make that work, we need a separate library to contains the router, without components and then stitch it together with the app.

This can be done using the following files:
- `libs/data/router` is the router library
- `libs/data/posts` is the posts data fetching library
- `libs/feature/posts` is the posts ui library
- `apps/tanstack-router-react-mono` is the app

With this approach, we can use the query options from the data library in the router, and in the feature library without causing circular dependencies.

And given the router lib re exposes the router components, when we import them in the feature library they are type safe given they are linked to the typescript augmentations.

And finally, in the app, we can create a map of route to component ([`apps/tanstack-router-react-mono/src/routerMap.tsx`](https://github.com/beaussan/tanstack-router-react-mono/blob/main/apps/tanstack-router-react-mono/src/routerMap.tsx)) that is used to stitch the router together with the components. **We could enforce lazy loading here also, but this was omitted for simplicity**.

Then, in the main file, we updates the routes with the route map we bulit [`apps/tanstack-router-react-mono/src/main.tsx`](https://github.com/beaussan/tanstack-router-react-mono/blob/main/apps/tanstack-router-react-mono/src/main.tsx#L18-L26), and we now have a fully type safe router!

Here is what it looks like in the monorepo:

![image](https://raw.githubusercontent.com/beaussan/tanstack-router-react-mono/main/assets/graph.png)

## Run tasks

To run the dev server for your app, use:

```sh
npx nx serve tanstack-router-react-mono
```

To create a production bundle:

```sh
npx nx build tanstack-router-react-mono
```

To see all available targets to run for a project, run:

```sh
npx nx show project tanstack-router-react-mono
```

tanstack-router-react-mono

tanstack-router-react-mono 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

tanstack-router-react-mono

tanstack-router-react-mono 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README