docs: add more details for webpack config

docs/router/framework/react/routing/installation-with-webpack.md

@@ -2,6 +2,24 @@
 title: Installation with Webpack
 ---
 
+The following configuration ensures that your dev server works seamlessly with client-side routing:
+
+- `historyApiFallback.rewrites`: Redirects all requests to `index.html`, allowing server can correctly serve the app for any route.
+- `output.publicPath`: Ensures that the web app can always get the correct path to the assets, even when the app url is with a subpath, for example, `/foo/bar`.
+
+```ts
+export default {
+  devServer: {
+    historyApiFallback: {
+      rewrites: [{ from: /./, to: '/index.html' }],
+    },
+  },
+  output: {
+    publicPath: '/',
+  },
+}
+```
+
 [//]: # 'BundlerConfiguration'
 
 To use file-based routing with **Webpack**, you'll need to install the `@tanstack/router-plugin` package.

examples/react/quickstart-webpack-file-based/src/routeTree.gen.ts

@@ -11,6 +11,8 @@
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as AboutRouteImport } from './routes/about'
 import { Route as IndexRouteImport } from './routes/index'
+import { Route as NestIndexRouteImport } from './routes/nest/index'
+import { Route as NestFooRouteImport } from './routes/nest/foo'
 
 const AboutRoute = AboutRouteImport.update({
   id: '/about',
@@ -22,31 +24,49 @@ const IndexRoute = IndexRouteImport.update({
   path: '/',
   getParentRoute: () => rootRouteImport,
 } as any)
+const NestIndexRoute = NestIndexRouteImport.update({
+  id: '/nest/',
+  path: '/nest/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const NestFooRoute = NestFooRouteImport.update({
+  id: '/nest/foo',
+  path: '/nest/foo',
+  getParentRoute: () => rootRouteImport,
+} as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/about': typeof AboutRoute
+  '/nest/foo': typeof NestFooRoute
+  '/nest': typeof NestIndexRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/about': typeof AboutRoute
+  '/nest/foo': typeof NestFooRoute
+  '/nest': typeof NestIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
   '/about': typeof AboutRoute
+  '/nest/foo': typeof NestFooRoute
+  '/nest/': typeof NestIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/about'
+  fullPaths: '/' | '/about' | '/nest/foo' | '/nest'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/about'
-  id: '__root__' | '/' | '/about'
+  to: '/' | '/about' | '/nest/foo' | '/nest'
+  id: '__root__' | '/' | '/about' | '/nest/foo' | '/nest/'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   AboutRoute: typeof AboutRoute
+  NestFooRoute: typeof NestFooRoute
+  NestIndexRoute: typeof NestIndexRoute
 }
 
 declare module '@tanstack/react-router' {
@@ -65,12 +85,28 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/nest/': {
+      id: '/nest/'
+      path: '/nest'
+      fullPath: '/nest'
+      preLoaderRoute: typeof NestIndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/nest/foo': {
+      id: '/nest/foo'
+      path: '/nest/foo'
+      fullPath: '/nest/foo'
+      preLoaderRoute: typeof NestFooRouteImport
+      parentRoute: typeof rootRouteImport
+    }
   }
 }
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   AboutRoute: AboutRoute,
+  NestFooRoute: NestFooRoute,
+  NestIndexRoute: NestIndexRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

examples/react/quickstart-webpack-file-based/src/routes/__root.tsx

@@ -26,6 +26,22 @@ function RootComponent() {
         >
           About
         </Link>
+        <Link
+          to="/nest"
+          activeProps={{
+            className: 'font-bold',
+          }}
+        >
+          Nest
+        </Link>
+        <Link
+          to="/nest/foo"
+          activeProps={{
+            className: 'font-bold',
+          }}
+        >
+          Nest/Foo
+        </Link>
       </div>
       <hr />
       <Outlet />

examples/react/quickstart-webpack-file-based/src/routes/nest/foo.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/nest/foo')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>nest/foo</div>
+}

examples/react/quickstart-webpack-file-based/src/routes/nest/index.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/nest/')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Nest</div>
+}